一直在尝试学习 CSS 以及在元素上悬停伪类的使用。每当我在导航栏中选择一个选项卡时，背景颜色都会改变颜色(这是我想要的)。但是，当我离开 anchor 文本时，文本变回白色。
理想情况下，我想要的是当鼠标悬停在上方时，导航选项卡将背景颜色变为白色，同时将文本变为黑色。这是代码:
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="container">
<div id="title">
<h1>Record Store</h1>
</div>
<div id="navigation">
<ul class="navbar">
<li><a href="#">Home</a>
</li>
<li><a href="#">Vinyl Stock</a>
</li>
<li><a href="#">Online Offers</a>
</li>
<li><a href="#">Collectors News</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</body>
和CSS代码:
* {
border: 0;
padding: 0;
margin:0;
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
min-height: 600px;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 30%;
}
#navigation {
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar a:hover {
color: black;
}
.navbar li:hover {
background-color: white;
}
有人可以看看并指出我哪里出错了吗？
最佳答案
您只需要更加谨慎地定义您的选择器。当有人将鼠标悬停在 li 上时，您正在做一件事；当他们将鼠标悬停在 a 上时，您正在做另一件事。您想要的是在将鼠标悬停在公共(public)元素上时更改这两个元素。
要解决问题，删除:
.navbar a:hover {
color: black;
}
并将其替换为:
.navbar li:hover a {
color: black;
}
jsFiddle
第一个选择器说“获取所有 .navbar 中的子元素 a:hover”，第二个选择器说“获取所有 a 是 li:hover 中的子级，是 .navbar. 的子级。”
关于html - CSS 中的伪类 hover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19891221/