CODEWITHSUNDEEP
htmlcss
Timothy De Groot
Timothy De Groot

Reputation: 63

change image and link on hover

I'm trying to achieve the following:

When a user hovers my navigationbar, the image and the text must change of color. I'm using a sprite for the images.

<ul id="nav">
    <li id="nav_logo"><img src="images/lch.png" width="302" height="114" alt="LCH"></li>
    <li id="nav_over_lch"><a href="index.html"><span></span> OVER LCH </a></li>
    <li id="nav_nieuws"><a href="index.html"><span></span>NIEUWS</a></li>
    <li id="nav_activiteiten"><a href="index.html"><span></span>EVENTS</a></li>
    <li id="nav_fotos"><a href="index.html"><span></span>FOTO 'S</a></li>
    <li id="nav_contact"><a href="index.html"><span></span>CONTACT</a></li>
 </ul>

I already have some CSS:

li#nav_over_lch span{background-position: 0 0;} 
li#nav_over_lch span:hover{background-position: 0 -50px;}
#nav li a {color:#1f1f1f; text-decoration:none; font-size:40px; font-family: 'headline_onehplhs'; display: block; text-align: center;}
#nav li a:hover{color:#006699;}

This is the piece of the CSS that changes the image and text. So far it changes both when you hover the text but only the images when you hover the images. Any ideas how to make this possible in (cross-browser) CSS?

Upvotes: 0

Views: 210

Answers (1)

Musa
Musa

Reputation: 97717

You should put hover on the element you want the hover to be on

li#nav_over_lch span{background-position: 0 0;} 
li#nav_over_lch:hover span{background-position: 0 -50px;}
#nav li a {color:#1f1f1f; text-decoration:none; font-size:40px; font-family: 'headline_onehplhs'; display: block; text-align: center;}
#nav li:hover a{color:#006699;}

Upvotes: 2

Related Questions