Working Demo Here

Question

好的，这是我的CSS代码。因此，当我将鼠标悬停在它上面时，我正试图将ul（无序列表）中的白色替换为黑色。想要提到我希望文本是黑色的，当我将鼠标悬停在盒子上时李而不是锚。谢谢。

_____________________________________________________________________________________
body {
width: 1000px;
font-family: Arial;
margin-left: auto;
margin-right: auto;
line-height: 135%;
}

.menu ul {
list-style-type: none;
text-align: center;
background-color: black;
margin-right: auto;
margin-left: auto;
}


.menu ul li {
display: inline-block;;
padding: 10px;
border-style: solid;
border-width: 0 1px 0 1px;
border-color:white;
margin-left:0;
margin-right:-5px;
}

.menu ul li:hover{
background-color: white;
color:black;
}

.menu a {
text-decoration: none;
color:white;
}

.menu a:hover{
color:black;
}
___________________________________________________________________________


// HTML
<!DOCTYPE html>
<html>
<head>
<title>WORKSPACE</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<meta charset="UTF-8">
</head>

<body>
<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Groups</a></li>
        <li><a href="#">Teachers</a></li>
        <li><a href="#">Students</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>



</body>

</html>

Answer 1

不要将规则悬停在a元素上，而是将悬停状态更改为li并定位链接。

http://jsfiddle.net/LUguq/

CSS

.menu li:hover a{
    color:black;
}

Answer 2

Working Demo Here

只需添加：

.menu ul li:hover a {
  color: black;
}

正如您在JSFiddle

中所看到的

导航栏。我做错了什么？

2 个答案:

CSS

Working Demo Here

导航栏 。我做错了什么？

2 个答案:

CSS

Working Demo Here

导航栏。我做错了什么？