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…
