[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