Turtle Turtle - 4 months ago 11
ASP.NET (C#) Question

Changing the colour of link text that are not hovered while hovering over a link?

Quick scenario: I have a menu that has black anchors by default and when I hover over a link it changes to white using :hover, standard enough stuff. How though would I then change all the other links to darkgray whilst the link that is being hovered over stay white?

I've had a look through http://www.w3schools.com/css/css_pseudo_classes.asp as my guess is it's one of these, however the descriptions don't seem to match what I'm after.

Answer

I have created a simple fiddle with CSS only, using ul:hover and ul:hover a:hover.

a{
background: grey;
padding: 3px;
}
li{
float: left; list-style: none; margin-right: 5px;
}
ul:hover a{
color: #f00;
}
ul:hover a:hover{
color: white;
}
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

http://jsfiddle.net/afelixj/mro07h6p/2/