Utilisation de CSS Sprites?

Question

J'essaie de faire une barre de navigation en utilisant les sprites css. J'ai l'image mais c'est juste une question de code maintenant. À l'heure actuelle, il est:

.navi a{ 
display:block; 
float:left; 
height:40px; 
overflow:hidden; 
background-position:left top; 
} 
navi a:hover img{ 
margin-top:-40px; 
} 

et le code html est:

<div class="topbar"> 
<img alt="title" src="title.png"/><br/> 
<div class="navi"> 
<a href="index.html" class="home"><img src="home_up.png"/></a> 
</div> 
</div> 

Tout ce que j'ai travail est l'image normale, la hauteur est correcte et cultures le reste de l'image, mais quand Je plane, ça ne fait rien. Aucune suggestion? Merci

Answer 1

Votre premier style est .navi a, mais vous écrivez: navi a:hover img. Cela signifie que le second style est appliqué à chaque image à l'intérieur d'un lien plané qui se trouve à l'intérieur de l'élément <navi />, et non à l'intérieur d'un élément qui a un nom de classe navi.

Ainsi, au lieu de:

navi a:hover img 

vous devez écrire:

.navi a:hover img