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

Posted 2023-05-08

【中文标题】将鼠标悬停在列表上时更改列表中每个链接的颜色

【英文标题】：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 类。看看这里：***.com/questions/676324

ul:hover a color: #333 代替？

实际上，现代浏览器在非锚元素上支持:hover。你不需要 JS。如果您在子元素的父元素样式为:hover 时将鼠标悬停在子元素上，就好像事件“冒泡”，因此悬停子元素就像悬停父元素一样。

【参考方案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 元素的尺寸范围内时发生变化，这很可能与将鼠标悬停在文本上时不同。例如，如果您编写一个简单的页面，在

中包含两个列表元素，在每个 中包含一个 ，当您将鼠标悬停在文本上时，您会看到颜色确实发生了变化，但是您将还可以看到 的大小跨越了整个页面的宽度，因此当您甚至没有将鼠标悬停在文本上时，颜色也会发生变化。我猜这是不受欢迎的行为，cleaner 解决方案可以使用 JavaScript 完成。