html - 将鼠标悬停在一个列表中时更改列表中每个链接的颜色

Question

这是一个示例列表:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

这是样式:

li a {
    color: #999;
}

li a:hover {
    color: #333;
}

现在，每个链接都是 #999，当用户将鼠标悬停在其中任何一个链接上时，单个链接将变为 #333。我要做的是不仅让悬停的链接变成#333，而且我还想让列表中的其他链接同时变成#eee。我该怎么做？

Answer 1

将 :hover 整个 <ul>在您的实例中工作？

ul:hover li a{
    color: #eee
}

由于特殊性规则，您还需要更改 a:hover规则:

ul li a:hover {
    color: #333;
}

这是一个例子:http://jsfiddle.net/7NLt8/