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;
}

以下是一个示例：http://jsfiddle.net/7NLt8/

Answer 2

你不能只用css做到这一点。你将只需要JavaScript。当其中一个链接悬停时，创建一个事件处理程序。选择/订阅该事件处理程序的所有锚点。然后实际函数将选择所有这些锚点并修改颜色。当用户的鼠标移动并且不再悬停时，您还需要处理这种情况（您需要将颜色设置回原始/默认值，这可能是另一个事件处理程序。）

编辑：所以你可以做大卫建议的事情。但是，只要鼠标位于ul元素的维度内，使用悬停在ul元素上就会导致文本的颜色发生变化，这很可能与将鼠标悬停在文本上时不同。例如，如果您在＆lt; ul＆gt;中编写一个包含两个列表元素的简单页面，并且＆lt; a＆gt;在每个＆lt; li＆gt;中，当您将鼠标悬停在文本上时，您会看到颜色确实发生了变化，但您还会看到＆lt; ul＆gt;的大小。跨越整个页面的宽度，因此当您甚至没有将鼠标悬停在文本上时，颜色也会发生变化。我猜这是不受欢迎的行为，可以使用JavaScript完成 clean 解决方案。

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

2 个答案: