0

OK これは私の 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 に答える