I'm building a website and got stuck with this weird problem. When I change the color and text-decoration using a css selector and a:link , a:visited the code works fine, but when I add a:hover nothing happens.
我正在建一个网站，却被这个奇怪的问题困住了。当我使用css选择器和a:link, a:修改颜色和文本修饰时，代码运行良好，但是当我添加a:hover时，什么都不会发生。
Basically what I want is just to change the link color on mouseover, so people can easily see that this is a link they can click on.
基本上我想要的只是改变鼠标悬停上的链接颜色，这样人们就可以很容易地看到这是一个他们可以点击的链接。
I'm using a google font, and template called normalize.css (both are linked to the snippet using CDNs). I'm also using a custom icons font called ionicons, and another stylesheet for creating the header/footer but I don't think they're relevant, since I recreated the problem in the snippet below without linking to them.
我使用的是谷歌字体和名为normalize的模板。css(都使用CDNs链接到代码片段)。我还使用了一种名为ionicon的自定义图标字体，以及另一个用于创建页眉/页脚的样式表，但我不认为它们是相关的，因为我在下面的代码片段中重新创建了这个问题，没有链接到它们。
I'm sure I'm missing something obvious but can't quite figure it out. Snippet below.
我肯定我漏掉了一些很明显的东西，但不太明白。下面的代码片段。
/************************************************
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>1 个解决方案
#1
6
It is an easy error to make. You have semicolons after your closing braces in css. Remove these and it works. Ie
这是一个很容易犯的错误。在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;
};
Becomes
就变成了
.article-box a:link, .article-box a:visited {
text-decoration: none;
color: #26A65B;
}
/* TIS ONE DOESN'T WORK */
.article-box a:hover {
color: #913D88;
}
#1
6
It is an easy error to make. You have semicolons after your closing braces in css. Remove these and it works. Ie
这是一个很容易犯的错误。在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;
};
Becomes
就变成了
.article-box a:link, .article-box a:visited {
text-decoration: none;
color: #26A65B;
}
/* TIS ONE DOESN'T WORK */
.article-box a:hover {
color: #913D88;
}