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

【问题标题】：change the color of a every link in a list when hovering over one将鼠标悬停在列表上时更改列表中每个链接的颜色
【发布时间】：2012-02-22 14:27:22
【问题描述】：

这是一个示例列表：

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

【问题讨论】：

您很可能需要 javascript 或 jquery。但是，您可能会将它们全部放在一个 div 中，并为该 div 提供一个 CSS hover 类。看看这里：stackoverflow.com/questions/676324
ul:hover a { color: #333 } 代替？
实际上，现代浏览器在非锚元素上支持:hover。你不需要 JS。如果您在子元素的父元素样式为:hover 时将鼠标悬停在子元素上，就好像事件“冒泡”，因此悬停子元素就像悬停父元素一样。

标签： html css

【解决方案1】：

:hover 在整个 <ul> 上是否适用于您的实例？

ul:hover li a{
    color: #eee
}

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

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

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

【讨论】：

这可以使所有其他链接变亮，但悬停在上面的链接也会变亮
确实，我最终在列表中添加了一个浮点数，因此该元素不会跨越页面，但这绝对可以解决问题。
@user1115666 您还需要更改现有规则，因为它们不太具体（它们不包括 ul）
当您接近文本但实际上并没有将鼠标悬停在文本上时，这不会改变颜色。例如，如果您在 ul 块元素的尺寸范围内，但实际上并未将鼠标悬停在文本上？

【解决方案2】：

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

编辑：所以你可以按照大卫的建议去做。但是，在 ul 元素上使用悬停将导致文本的颜色在鼠标位于 ul 元素的尺寸范围内时发生变化，这很可能与将鼠标悬停在文本上时不同。例如，如果您编写一个简单的页面，在

中包含一个
，当您将鼠标悬停在文本上时，您会看到颜色确实发生了变化，但是您将还可以看到

【讨论】：