我正在建立一个网站,并陷入这个奇怪的问题.当我更改color并text-decoration使用css选择器时a:link,a:visited代码工作正常,但是当我添加a:hover没有任何反应时.
基本上我想要的只是改变鼠标悬停时的链接颜色,这样人们就可以很容易地看到这是他们可以点击的链接.
我使用的是谷歌字体,名为normalize.css的模板(两者都使用CDN链接到代码段).我还使用了一个名为ionicons的自定义图标字体,以及另一个用于创建页眉/页脚的样式表,但我不认为它们是相关的,因为我在下面的代码段中重新创建了问题而没有链接到它们.
我确定我错过了一些明显但却无法弄明白的东西.下面的片段.
/************************************************
LAYOUT
************************************************/
/************************************************
SEARCHBOX
************************************************/
#articles-sidebar {
margin: 0.5em 0;
padding: 1em;
}
#articles-sidebar h2, #articles-sidebar p {
margin: 0;
padding: 0;
}
#articles-sidebar input {
box-sizing: border-box;
padding: 0.5em;
margin: 0.5em 0;
}
#articles-sidebar input[type="submit"] {
border: none;
color: #fff;
background-color: #26A65B;
}
/************************************************
ARTICLES
************************************************/
.article-box {
padding: 0.5em;
margin-bottom: 0.5em;
}
.free {
background-color: #e3f9ec;
}
.members {
background-color: #e1b8dd;
}
.article-categories {
list-style: none;
margin: 0;
padding: 0;
}
.article-category {
padding: 0.5em;
margin-right: 0.5em;
display:inline-block;
background-color: #fff;
border-radius: 50px;
}
.article-box h1 {
margin: 0.5em 0;
padding: 0;
}
.article-box a:link, .article-box a:visited {
text-decoration: none;
color: #26A65B;
};
/* THIS ONE DOESN'T WORK */
.article-box a:hover {
color: #913D88;
};<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Articles | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" type="text/css" href="css/ionicons.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/articles.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li><a href="http://topdeckandwreck.com/PTC_php">home</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/articles">articles</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/sites">sites</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/contact">contact</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/login">login</a></li>
</ul>
</header>
<div id="content">
<div id="articles-sidebar">
<h2>Search articles archive:</h2>
<form>
<input type="text" placeholder="author, title, keyword...">
<input type="submit" value="Search">
</form>
</div>
<div id="articles-feed">
<div class="article-box free">
<h1><a href="#">Article title</a></h1>
<ul class="article-categories">
<li class="article-category"><a href="#">milestone</a></li>
<li class="article-category"><a href="#">strategy guide</a></li>
<li class="article-category"><a href="#">free</a></li>
</ul>
<h3><a href="#">Article Author</a> | Date posted</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis congue malesuada. Cras in lacinia urna, ut malesuada ex. Ut tempor dignissim ex, vel congue mi tristique vel. Duis non nisi congue, malesuada enim et, ornare nunc. Donec auctor mattis neque, eget hendrerit ante euismod at. Donec quis sem facilisis, pretium dui at, mattis est. Cras tristique ultrices ipsum, id ornare diam egestas quis. Aliquam pulvinar turpis sit amet lacinia laoreet. In scelerisque vitae neque et pulvinar. Donec auctor turpis erat, ut tincidunt risus aliquam non. </p>
</div>
<div class="article-box members">
<h1><a href="#">Article title</a></h1>
<ul class="article-categories">
<li class="article-category"><a href="#">milestone</a></li>
<li class="article-category"><a href="#">strategy guide</a></li>
<li class="article-category"><a href="#">free</a></li>
</ul>
<h3><a href="#">Article Author</a> | Date posted</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis congue malesuada. Cras in lacinia urna, ut malesuada ex. Ut tempor dignissim ex, vel congue mi tristique vel. Duis non nisi congue, malesuada enim et, ornare nunc. Donec auctor mattis neque, eget hendrerit ante euismod at. Donec quis sem facilisis, pretium dui at, mattis est. Cras tristique ultrices ipsum, id ornare diam egestas quis. Aliquam pulvinar turpis sit amet lacinia laoreet. In scelerisque vitae neque et pulvinar. Donec auctor turpis erat, ut tincidunt risus aliquam non. </p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>这是一个容易犯的错误.在css中关闭括号后你有分号.删除这些,它的工作原理.即
.article-box a:link, .article-box a:visited {
text-decoration: none;
color: #26A65B;
};
/* TIS ONE DOESN'T WORK */
.article-box a:hover {
color: #913D88;
};
变
.article-box a:link, .article-box a:visited {
text-decoration: none;
color: #26A65B;
}
/* TIS ONE DOESN'T WORK */
.article-box a:hover {
color: #913D88;
}
| 归档时间： |
|
| 查看次数： |
168 次 |
| 最近记录： |