[FAQ] Comment modifier le style d'une balise au survol sans JavaScript ?
Citation:
[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:
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:
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
