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…

Article(s) sur le même sujet

• Internet Explorer 7 et Firefox 2
• Internet Explorer 7 vs Firefox 2
• Cafoutch de la semaine
• Cafoutch de la semaine
• Tutoriel : Lecteur Video Flash