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

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。我该怎么做？

- user1115666

---

你很可能需要使用JavaScript或jQuery来完成此操作。不过，你可以将它们全部放在一个div中，并为该div提供CSS的hover类。在这里看看：https://dev59.com/5XRB5IYBdhLWcg3wQVSV - Robert Harvey

ul:hover a { color: #333 } 可以改为什么？ - Marc B

实际上，现代浏览器支持在非锚元素上使用:hover。您不需要使用JS来实现此功能。如果您在父元素被设置为:hover时悬停在子元素上，则就像事件“冒泡”一样，悬停在子元素上就像悬停在父元素上一样。 - Joseph

Answer 1

在您的情况下，整个 <ul> 上的 :hover 是否可行？

ul:hover li a{
    color: #eee
}

由于特定规则，您还需要更改a:hover规则：

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

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

- david

---

这适用于使所有其他链接变轻，但是被悬停的链接也会变轻。 - user1115666

实际上，我最终将一个浮点数添加到列表中，以便该元素不会跨越页面，但这确实解决了问题。 - Charles Sprayberry

@user1115666，您需要修改现有的规则，因为它们不够具体（不包括ul）。 - david

这样做是否仍会在接近文本但实际上不悬停在文本上时更改颜色。例如，如果您处于 ul 块元素的尺寸范围内，但实际上未悬停在文本上？ - Andrew Rasmussen

Answer 2

你不能仅使用CSS来完成这个任务。你需要使用JavaScript。为当鼠标悬停在链接上时创建一个事件处理程序。选择/订阅所有这些锚点到该事件处理程序。然后实际的函数将选择所有这些锚点并修改颜色。您还需要处理用户鼠标移动并不再悬停的情况（您将希望将颜色设置回原始/默认值，这可能是另一个事件处理程序）。

编辑： 所以你可以做david建议的事情。但是，在ul元素上使用hover会导致文本颜色在鼠标位于ul元素的尺寸范围内时改变，这很可能与仅在悬停在文本上时不同。例如，如果您编写一个简单的页面，其中包含两个列表元素，每个li中都有一个a，并且一个ul中，您将看到当您悬停在文本上时颜色确实会改变，但是您还会看到ul的大小跨越整个页面的宽度，因此即使您没有悬停在文本上，颜色也会改变。我猜这是不希望的行为，可以使用JavaScript实现更清晰的解决方案。

- Andrew Rasmussen