个人中心
gpt4 book ai didi

html - 鼠标悬停时链接不改变颜色 :hover

转载 作者：太空狗 更新时间：2023-10-29 12:24:51 25 4
gpt4 key购买 nike

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

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

我使用的是谷歌字体和名为 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>

最佳答案

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

关于html - 鼠标悬停时链接不改变颜色 :hover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30681179/

25 4 0
文章推荐： html - 如何使div的宽度适合内容而不是窗口
文章推荐： c - 如何在 C 中模拟 Linux 系统调用
文章推荐： css - 语义 ui 框架是否支持 rtl 语言？
文章推荐： python - 从 python 脚本导入 shell 变量
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com