Hover et Active sur IE

**joce21** · 21/03/2012, 13h33

Bonjour,

J'ai un menu fait à partir de div sur quoi j'ai des :hover et :active qui fonctionne parfaitement sur FireFox et Chrome. Cependant, sur IE ça ne fonctionne pas. J'ai trouver sur le Web que IE supporte :hover seulement sur les balises <a>.

J'ai trouvé aussi ceci: Whatever:hover

J'ai fait comme ils disent en ajoutant cette ligne dans le haut de mon CSS:
(le fichier est dans le même répertoire que mon fichier CSS)

Code :

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

1
2
3
4
body
{ 
    behavior: url(csshover3.htc); 
}

Mais ça ne fonctionne pas... Mon VS ne reconnaît pas "behavior", je ne sais pas si c'est normal.

Voici à quoi ressemble mon CSS:

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
32
33
34
35
36
37
38
39
40
41
42
43
body
{ 
    behavior: url(csshover3.htc); 
}
 
.mainMenuButton img
{
    width: 32;
    height: 32;
    vertical-align: middle;
}
 
.mainMenuButton
{
    background: url('../Images/menu_button.png') no-repeat;
    height: 70px;
    width: 150px !important;
    line-height: 70px;
    overflow: hidden;
}
 
.mainMenuButton:hover
{
    cursor: hand !important;
    background-position: -150px;
}
 
.mainMenuButton:active
{
    cursor: hand !important;
    background-position: -300px;
}
 
.mainMenuButton table
{
    margin-left: 15px;
    height: 100%;
}
 
.mainMenuButton span
{
    font-size: small;
}

Sinon, quelle alternative je devrais utiliser?

Merci d'avance.

**Bovino** · 21/03/2012, 14h08

J'ai trouver sur le Web que IE supporte :hover seulement sur les balises <a>.

Heu... c'était vrai pour IE6... donc cette information est largement obsolète.

Cependant, sur IE ça ne fonctionne pas.

C'est un peu léger comme explication du problème

**joce21** · 22/03/2012, 13h27

Envoyé par Bovino

Heu... c'était vrai pour IE6... donc cette information est largement obsolète.

C'est un peu léger comme explication du problème

Quelle sont les autres balises supportant le :hover alors? Je travaille avec IE8 et le :hover ne fonctionne pas sur les div.

Je comprends que c'est peut-être léger comme explication, mais je ne peux même pas savoir qu'est-ce qui ne fonctionne pas étant donné que c'est du CSS/HTML donc je ne peux faire de trace sur console ou autre. Lorsque je regarde mon CSS dans IE, tout à l'air être correcte, mais le :hover ne fonctionne pas.

Pour l'instant, j'utilise du jQuery pour imiter le :hover et le :active et ça fonctionne. J'imagine que c'est la seule solution pour IE.

Merci quand même.

**Kaamo** · 22/03/2012, 14h17

Je comprends que c'est peut-être léger comme explication, mais je ne peux même pas savoir qu'est-ce qui ne fonctionne pas étant donné que c'est du CSS/HTML donc je ne peux faire de trace sur console ou autre. Lorsque je regarde mon CSS dans IE, tout à l'air être correcte, mais le :hover ne fonctionne pas.

Il y a une console intégrée aux navigateurs. Par exemple, IE9 peut être mis en mode de compatibilité quirks pour émuler les comportements de ses vieilles versions.

A la place de jquery, tu peux utiliser le script "whatever:hover", par exemple. (il a le mérite de ne faire que ça, donc si tu n'as pas autre utilité de jquery, choisis plutôt ce script. Tout se fait automatiquement) Téléchargeable ici. (+ d'infos). Une fois téléchargé, il est à placer dans le répertoire du fichier css et l'inclure dans ce dernier :

Code css :

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

1
2
3
body { 
behavior: url("csshover3.htc"); 
}

En gros, ce p'tit script cherche tous les :hover qui ne sont supportés par IE, et les remplace. Voir le lien pour plus d'info

A noter que le script supporte aussi les :focus et :active.

**Bovino** · 22/03/2012, 14h46

Je travaille avec IE8 et le :hover ne fonctionne pas sur les div.

Ben pourtant si !

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
<!DOCTYPE html>
<html>
    <head>
		<title>hover</title>
        <meta charset="utf-8" />
		<style>
                        #test{
                                background-color: silver;
                        }
                        #test:hover{
                                background-color: gold;
                        }
                </style>
    </head>
    <body>
		<div id="test" style="width: 200px; height: 100px"></div>
	</body>
</html>

fonctionne parfaitement, même avec IE7 !

Ensuite, c'est peut-être dû à ta page : si elle n'est pas conforme et bascule en mode quircks, alors effectivement, le rendu sera celui d'IE5.5 et le hover pas pris en charge, mais IE n'y est pour rien si ta page a un mauvais doctype ou si elle est mal écrite

Hover et Active sur IE

HTML

Discussions similaires

Partager

Partager