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

Here's an example list:

下面是一个示例列表:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

And here's are the styles:

这是风格:

li a {
    color: #999;
}

li a:hover {
    color: #333;
}

Right now, each link is #999 and when a user hovers over any of them, the individual link becomes #333. What I'm trying to do is make not only the link being hovered over become #333, but I would also want to make the other links in the list become #eee at the same time. How can I do this?

现在，每个链接都是#999，当用户悬停在任何一个链接上时，每个链接就变成#333。我所要做的不仅是使被悬停的链接变成#333，而且我还想让列表中的其他链接同时变成#eee。我该怎么做呢?

2 个解决方案

#1

Would a :hover on the entire <ul> work in your instance?

在您的实例中，是否将整个

ul:hover li a{
    color: #eee
}

Because of specificity rules you'd also need to change your a:hover rule:

由于特异性规则，您还需要更改您的a:hover rule:

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

Here is an example: http://jsfiddle.net/7NLt8/

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

#2

You cannot do this with just css. You're going to have to just JavaScript. Make an event handler for when one of those links are being hovered over. Select/subscribe all of those anchors to that event handler. Then the actual function will select all of those anchors and modify the color. You will also need to handle the case when the user's mouse moves and is no longer hovering (you'll want to set the color back to the original/default, and this will likely be another event handler).

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

Edit: So you can do what david suggested. However, using the hover on the ul element will cause the color of the text to change whenever the mouse is within the dimensions of the ul element, which is very likely going to be different than just when hovering over the text. For example, if you code up a simple page with two list elements inside a <ul>, and an <a> in each <li>, you will see that the color does change when you hover over the text, but you'll also see that the size of the <ul> spans the width of the entire page, so the colors will also change when you aren't even hovering over the text. I'm guessing this is undesired behavior and a cleaner solution can be done using JavaScript.

编辑:所以你可以按照大卫的建议去做。但是，在ul元素上使用鼠标悬停将会导致文本颜色的改变，无论何时鼠标在ul元素的尺寸范围内，这很可能与在文本上方悬停的情况不同。例如,如果您编写一个简单的页面有两个列表元素< ul >内,每个 <李> 和 <一> ,你会发现颜色是否改变当你悬停在文本,但您还将看到的大小< ul >横跨整个页面的宽度,所以颜色也将改变当你甚至不悬停文本。我猜这是不希望的行为，使用JavaScript可以实现更干净的解决方案。

#1