nikohk

Au plus tard à la fin du mois d’octobre, Internet Explorer 7 sera disponible au téléchargement dans sa version finale. Tout comme son homologue, Mozilla Firefox devrait sortir dans sa version 2 courant de ce mois. J’ai hate de voir cela et de tester tous les sites sur lesquelles je bosse en ce moment.

Pour info, la version RC1 d’Internet Explorer 7 est toujours disponible.

L’aventure continue…

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…