Internet Explorer et :hover
Il n’y a pas très longtemps, j’ai trouvé 2 solutions afin qu’Internet Explorer puisse interpréter correctement l’effet :hover (survol) sur les boutons (par exemple le fameux submit des formulaires).
1ère solution : csshover.htc
Il s’agit du fichier csshover.htc à ajouter à votre site et d’un petit bout de code à insérer dans la css correspondant :
body { behavior: url(csshover.htc); }
input.submit:hover {
color:green;
background-color:black;
cursor:pointer;
}
Dans la page internet :
<input type="submit" class="submit" />
Vous pouvez voir le résultat avec le bouton du formulaire de recheche (en haut de la colonne de liens).
Ce fichier permet également de gérer l’effet :active. Afin de bénéficier en plus de l’effet :focus, utilisez le fichier csshover2.htc.
2ème solution : insertion de balises <a>
Internet Explorer ne gère l’effet :hover que dans le cadre de balises <a> (lien hypertexte). Donc l’astuce consiste à entourer votre bouton de cette balise dans la page internet :
<a href="javascript:void(0)"> <input type="submit" class="submit" /> </a>
Dans la CSS :
a:hover input.submit {
color:white;
background-color:black;
cursor:pointer;
}
Le résultat :
A noter que j’ai également entouré le lien et le bouton d’un div (avec l’id test) afin de gérer au mieux un éventuel surlignement par défaut du lien.
<div id="test"> <a href="javascript:void(0)"> <input type="submit" class="submit" /> </a> </div>
Dans la CSS :
#test a {
text-decoration:none;
}
#test a:hover input.submit {
color:white;
background-color:black;
cursor:pointer;
}
En espérant que cela puisse aider…
Tags: css, explorer, hover, ie, internetSi cet article vous plait, je vous invite à laisser un commentaire. Vous pouvez également vous abonner au flux RSS du blog.
Commentaires
En effet, c’est bien dommage qu’IE ne gère pas ce genre de chose aussi facilement que Firefox, Opéra, Safari, …
Merci pour cette aide précieuse.
Il est en effet très regretable qu’ie ne gère pas correctement les styles.
Oui, c’est bien mais il y a une limite :
<a href='#> <div> <a href=....>Un lien </a> </div> </a>
Ca marche plus. A mon humble avis, c’est parce qu’il y un lien a dans le a.. Comprenne qui pourra.
Ben la limite est que ce ‘patch’ est principalement destiné au survol des boutons de validation. Donc un lien qui englobe un input.
Après des liens dans des liens… :(
Ps : Désolé pour l’affichage de ton précédent message. Inconvénients des CMS maison. Vivement Dotclear. :D
[...] autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que [...]
[...] autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que [...]
[...] autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que [...]
C’est bien dommage qu’il faille faire tout ca pour faire fonctionner correctement CSS sur le navigateur le plus utilisé des internautes !!