logo标签列表

鼠标悬停时链接没有改变颜色：使用a:hover

htmlcss
4
我正在建设一个网站，遇到了一个奇怪的问题。当我使用css选择器和，更改颜色和文本装饰时，代码可以正常工作，但是当我添加时，什么都不会发生。
基本上我想要的就是在鼠标悬停时更改链接颜色，这样人们就可以轻松地看到这是他们可以点击的链接。
我正在使用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>&nbsp;| 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>&nbsp;| 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>
      &copy;&nbsp;PTC-Testers,&nbsp;2015
    </footer> 
  </body>
</html>

你想要悬停在哪里？ - Mudassar Saiyed
在 .article-box 内的所有链接上 - Miha Šušteršič
1个回答
6
这是一个常见的错误。在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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接