Change the color of each link in the list when you hover over one

Question

Here is a list of examples:

<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 are the styles:

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

Right now, each link is # 999, and when a user is hovering on any of them, a separate link becomes # 333. What I'm trying to do is not only drag and drop the link, but I also want the other links in the list #eee at the same time. How can i do this?

Answer 1

Will: hover over all the <ul> in your instance?

 ul:hover li a{ color: #eee } 

Due to specificity rules, you also need to change the a:hover rule:

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

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

Answer 2

You cannot do this with css only. You will just have JavaScript. Create an event handler when one of these links freezes. Select / sign all of these bindings to this event handler. Then the actual function will select all these anchors and change the color. You will also need to handle the case where the user mouse moves and no longer freezes (you need to set the color back to the original / default, and this will most likely be a different event handler).

Edit: Therefore, you can do what David suggested. However, using the hover over the ul element will change the color of the text whenever the mouse is within the size of the ul element, which is likely to be different from the one just when you hover over the text. For example, if you create a simple page with two list items inside <ul>, and <a> in each <li>, you will see that the color changes when you hover over the text, but you will also see that the <ul> size spans the width the whole page, so the colors will also change when you don’t even hang over the text. I assume this is an undesirable behavior, and a cleaner solution can be implemented using JavaScript.