CSS + IE6 : comportement hover sur tous élements HTML

Internet Explorer 6, version fournie avec Windows XP est LA plaie de tout webmaster. Et quand j’emploie le mot “plaie”, je suis même plutôt gentil… Ce navigateur devrait même être banni tellement il ne respecte pas les standards d’affichage et de codage…

Si vous utilisez le comportement :hover sur autre chose qu’une balise de lien (a) avec IE6, ça ne marche tout simplement pas (ou du moins ça bug énormément). Le “hover” permet de définir un comportement lorsque vous survolez l’élément avec la souris.

Sous IE6, pour pouvoir faire du :hover sur autre chose qu’une balise A, vous devez utiliser un “hack”.

- Télécharger le fichier csshover3.htc que vous trouverez sur http://www.xs4all.nl/~peterned/csshover.html
- Le copier dans le dossier que vous utilisez pour vos feuilles de style.
- Rajouter dans la partie head de vos fichiers .html le code suivant :

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" />
<![endif]-->

(ce code permet de définir de nouvelles règles spécifiques pour IE6. Ces règles seront définies dans la feuille de style ie6.css)

Dans ie6.css :

body {
behavior: url("csshover3.htc");
}

Maintenant vous pouvez faire un hover avec d’autres balises que le A (exemple des images ou des div).