Question

我正在建立一个网站并陷入这个奇怪的问题。当我使用css选择器和color text-decoration更改a:link和a:visited时，代码工作正常，但是当我添加a:hover时没有任何反应。

基本上我想要的只是改变鼠标悬停时的链接颜色，这样人们就可以很容易地看到这是他们可以点击的链接。

我使用谷歌字体和名为normalize.css的模板（两者都使用CDN链接到代码段）。我还使用了一种名为ionicons的自定义图标字体，以及另一种用于创建页眉/页脚的样式表，但我认为它们并不相关，因为我在下面的代码段中重新创建了问题而没有链接到它们。

我确定我错过了一些显而易见的东西，但却无法弄明白。下面的代码段。

＆＃13;

/************************************************
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;
};

＆＃13;

<!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>

＆＃13;

Answer 1

这是一个容易犯的错误。在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;
}

链接不会在鼠标悬停时使用：hover更改颜色

1 个答案: