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

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

a:将鼠标悬停<ul>在你的实例中的整个工作上吗？

ul:hover li a{
    color: #eee
}

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

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