Hover sur un lien texte avec une image et un fond

Bonsoir,

Cela fait quelque soir que je me casse la tête dessus et je n'y arrive toujours pas , si vous pouvez me refiler un ptit coup de pouce...

j'ai un menu tout bete avec des liens, je souhaite qu'au passage de la souris l'imagette se trouvant avant le lien change et devienne une autre imagette, mais en plus au passage de la souris la couleur du texte change avec un fond différent :

ex

code html :

<na id="navbar">
<ul>
<li><a href="#"> mail </a></li>
</ul>
</nav>

en CSS

#navbar a{display:block;
width:150px;
background: white;
color:black;
}
#navbar a:hover{color:white;
backgroung:black;}

juste avant le lien ou il y a le mail, il y aurait par exemple une enveloppe noire, celle-ci deviendrait blanche au survol et le terme MAIL deviendrait blanc sur un fond noire...

merci de votre aide,
liza

Bonjour,
Si je comprend bien ce que tu cherche à faire, il suffirait de mettre une image de fond sur les liens (avec un padding pour décaler le texte), et de changer cette image au survol.

#navbar a{
background: white url('image_noire') 0 0 no-repeat;
padding-left: 20px;
}
#navbar a:hover{
background: black url('image_blanche') 0 0 no-repeat;
}