[CSS] Effet de hover qui ne fonctionne pas sous IE
Bonjour,
J'ai besoin de créer des liens avec une image (différente à chaque fois) et un texte. L'ensemble doit être réactif au passage de la souris.
J'ai donc créé :
Code:
1
2
3
4
5
6
7
8
9
10
| HTML :
<a href="#" class="test"><img src="toto.jpg" width="20" height="20" border="1" /> Texte</a>
CSS :
a.test {
border: 1px solid green;
text-decoration: none;
}
a.test:hover {
text-decoration: underline overline;
} |
mais l'espace entre l'image et le texte recevait alors les attribut de surlignage.
J'ai donc ajouté un <span> autour du texte pour qu'il soit le seul concerné par le hover (déplacé sur le span seul) :
Code:
1
2
3
4
5
6
7
8
9
10
| HTML :
<a href="#" class="test"><img src="toto.jpg" width="20" height="20" border="1" /> <span>Texte</span></a>
CSS :
a.test {
border: 1px solid green;
text-decoration: none;
}
a.test:hover span {
text-decoration: underline overline;
} |
Pas de pb sous FF mais sous IE, le hover ne fonctionne plus !
8O
