[FAQ] Comment modifier le style d'une balise au survol sans JavaScript ?

**bigboomshakala** · 05/11/2008, 20h09

[QR] Comment modifier le style d'une balise au survol sans JavaScript ?

Avec les navigateurs récents il est possible d'utiliser la pseudo-classe :hover pour agir sur les balises au moment de leur survol. On peut par exemple définir les styles img{ width:100px; } et img:hover { width:auto; } pour qu'au survol d'une image celle-ci prenne sa taille réelle.

Malheureusement Internet Explorer 6 (navigateur encore très largement utilisé de nos jours) ne comprend la pseudo-classe :hover que sur les liens...

L'idée est alors d'encapsuler dans un lien la balise sur laquelle on veut agir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
    <head>
        <style>
a img
{
    width:100px;
    border:0px;
}
 
a:hover img
{
    width:auto;
    border:0px;
}    
 
a:hover input
{
    background-color : red;
}       
        </style>
    </head>
    <body>
        <a href="javascript:void 0;">
            <img src="uneImage.jpg" />
        </a>
 
        <a href="javascript:void 0;">
            <input type=text value="salut mon pote"/>plop
        </a>
    </body>
</html>

Là vous vous dites "génial, au final moyennant une petite astuce on peut faire la même chose sur IE6 !". Et bien non, cela ne fonctionne pas. un style a:hover est correctement interprété, mais a:hover uneBalise n'est pas reconnu.

Cependant IE6 est capable de comprendre ces pseudo-classe s'ils définissent une valeur pour la propriété filter (allez savoir pourquoi?!?), là ça fonctionne !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
a:hover img
{
    filter:alpha(opacity=100);
    width:auto;
    border:0px;
}   
 
a:hover input
{
    filter:alpha(opacity=100);
    background-color : red;
}

Voilà comment, sans JavaScript, vous pouvez modifier le style d'une balise au survol de cette dernière, et cela de manière totalement compatible sur tous les navigateurs modernes

**Auteur** · 21/12/2008, 13h19

juste une précision :
une balise <a> (type inline) ne peut contenir que des balises inline (img, span, input) sauf une autre balise <a>. Donc il est hors de question d'écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
        <a href="javascript:void 0;">
            <div> salut tout le monde <br/>
            </div> 
        </a>

car le div est une balise de type block, tout comme les balises <p>, <form>, etc. de même, ne pas encadrer d'une balise <a> des balises pour le tableau : <table>, <td>, <tr>, <th>, <tbody>....

[FAQ] Comment modifier le style d'une balise au survol sans JavaScript ?

Contribuez

Vue hybride

Discussions similaires

Partager

Partager