0

好的，这是我的一段 CSS 代码。因此，当我将鼠标悬停在 ul（无序列表）上时，我尝试将白色替换为黑色。想提一下，当我将鼠标悬停在框上时，我希望文本为黑色li 而不是主播。谢谢。

_____________________________________________________________________________________
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>
4

2 回答 2

0

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

http://jsfiddle.net/LUguq/

CSS

.menu li:hover a{
    color:black;
}
于 2013-09-21T14:18:09.387 回答
0

工作演示在这里

只需添加：

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

正如您在JSFiddle中看到的

于 2013-09-21T14:20:49.907 回答