链接不会在鼠标悬停时使用：hover更改颜色
[英]link doesn't change color on mouseover with a:hover
问题描述
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更改color和text-decoration ， a:visited的代码工作正常，但是当我添加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). 我使用的是谷歌字体，名为normalize.css的模板（两者都使用CDN链接到代码段）。 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. 我还使用了一个名为ionicons的自定义图标字体，以及另一个用于创建页眉/页脚的样式表，但我不认为它们是相关的，因为我在下面的代码段中重新创建了问题而没有链接到它们。
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 已采纳 2015-06-06 09:57:31
It is an easy error to make. 这是一个容易犯的错误。 You have semicolons after your closing braces in css. 在css中关闭括号后你有分号。 Remove these and it works. 删除这些，它的工作原理。 Ie 即
.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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.