我正在建立一个网站，并陷入了这个奇怪的问题。当我更改CSScolor并text-decoration使用css选择器和时a:link，a:visited代码可以正常工作，但是当我添加a:hover任何内容时，都不会发生。
基本上，我想要的只是在鼠标悬停时更改链接颜色，因此人们可以很容易地看到这是他们可以单击的链接。
我正在使用Google字体和名为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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句