change the color of a every link in a list when hovering over one

Question

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?

You'll most likely need javascript or jquery for this. However, you might get away with putting them all inside a div, and providing a CSS `hover` class for the div. Have a look here: http://stackoverflow.com/questions/676324 — Robert Harvey, Jan 30 '12 at 19:54
actually, modern browsers support `:hover` on non-anchor elements. you don't need JS for this. if you hover on a child element when it's parent is styled with `:hover`, it as if the event "bubbles" thus hovering a child is like hovering the parent. — Joseph, Jan 30 '12 at 20:01

david · Accepted Answer · 2012-01-30T20:05:40.170

9

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:

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

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

edited Jan 30 '12 at 20:05

answered Jan 30 '12 at 19:58

david

17,925
4
43
57

this works for making all of the other links lighter, but the link being hovered over becomes lighter as well – Jan 30 '12 at 20:05
Indeed, I wound up adding a float to the list so the element doesn't span the page but this definitely does the trick. – Charles Sprayberry Jan 30 '12 at 20:06
@user1115666 You need to change your existing rules too because they're less specific (they don't include the ul) – david Jan 30 '12 at 20:06
Wouldn't this still change the color when you are *near* the text but not actually hovering over the text. For example if you are within the dimensions of the ul block element, but not actually hovering over text? – Andrew Rasmussen Jan 30 '12 at 20:07

Andrew Rasmussen · Answer 2 · 2012-01-30T20:12:34.487

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).

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.

change the color of a every link in a list when hovering over one

2 Answers2