Internet Explorer et :hover

11 avril 2006 | Posté dans Web |

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, internet

Article(s) sur le même sujet

10 Commentaires pour “Internet Explorer et :hover”

big_ben3333 dit:
03 décembre 2006 à 15:53
C’est bien dommage qu’il faille faire tout ca pour faire fonctionner correctement CSS sur le navigateur le plus utilisé des internautes !!
Nhk dit:
04 décembre 2006 à 0:05
En effet, c’est bien dommage qu’IE ne gère pas ce genre de chose aussi facilement que Firefox, Opéra, Safari, …
Romain Lafforgue dit:
09 décembre 2006 à 19:09
Merci pour cette aide précieuse.
Il est en effet très regretable qu’ie ne gère pas correctement les styles.
jean-luc dit:
01 février 2007 à 20:59
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.
Nhk dit:
01 février 2007 à 21:58
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
Un beau bouton submit avec CSS - JBJ’s Blog dit:
16 novembre 2007 à 14:49
[...] autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que [...]
Testblog » Blog Archive » Un beau bouton submit avec CSS dit:
22 décembre 2007 à 21:10
[...] autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que [...]
JBJ’s Blog » Blog Archive » Un beau bouton submit avec CSS dit:
28 janvier 2008 à 16:01
[...] autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que [...]
Valenten dit:
06 août 2008 à 12:38
Salut,

eajn-luc a dit :

Oui, c’est bien mais il y a une limite :

Un lien

Ca marche plus. A mon humble avis, c’est parce qu’il y un lien a dans le a.. Comprenne qui pourra.

——————–

=> c’est normal, tu fais un lien sur un div . est de type line alors que est un block
az dit:
10 septembre 2008 à 11:23
Merci beaucoup pour cette aide, tu m’enlèves une grosse épine du pied

Az

nikohk