hover avec IE6

Version imprimable

hover avec IE6

Bonjour à tous,

Je cherche à construire une page ayant des comportements au survol d'images en utilisant uniquement du CSS.

Je commence à obtenir le comportement que je veux sauf sur IE6 (évidement...)

J'essaye d'afficher une image lorsqu'on en survole une autre dans un élément <a> et de la faire disparaitre quand on arrête le survol.

Sur IE6 l'image apparait mais reste présente à l'écran lorsqu'on quitte le survol de l'élément <a>

Voici le HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="">
<meta name="description" content="">
<title>Christina Sports Reservez Pack, Ski, Snowboard, Chaussures de ski, Boots...</title>
 
<link type="text/css" href="css/main.css" rel="Stylesheet" />
 
</head>
 
<body>
<img id="img_christina" src="images/christina-sports.gif"/>
<a class="info_bulle" href="#"><img class="btnAccueil" id="location_btn" src="images/location-ski-snowboard.jpg"/><span><img class="txtAccueil" id="location_txt" src="images/txtLocation.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="matos_btn" src="images/vente-ski-snowboard-materiel.jpg"/><span><img class="txtAccueil" id="matos_txt" src="images/txtEquipement.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="sportswear_btn" src="images/vente-sportswear.jpg"/><span><img class="txtAccueil" id="sportswear_txt" src="images/txtVente.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="magasin_btn" src="images/christina-sports-magasin.jpg"/><span><img class="txtAccueil" id="magasin_txt" src="images/txtMagasin.gif"/></span></a>
 </body>
 </html>

et le CSS

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#ABAAAB;
background-image:url(../../images/fond.gif);
background-repeat:repeat-x;
background-position: top left;
margin:0px;
margin-top:10px;
overflow:hidden;
}
 
#img_christina{
z-index:1;
position:absolute;
left:50%;
top:40%;
margin-left:-375px;
margin-top:-275px;
}
 
.btnAccueil{
position:absolute;
left:50%;
top:40%;
margin-top:150px;
border:#FFFFFF 2px solid;
cursor:pointer;
}
 
.txtAccueil{
position:absolute;
left:50%;
top:35%;
margin-top:120px;
cursor:pointer;
 
}
 
span{
display:none;
}
 
a.info_bulle:hover{
border:0;
}
 
a.info_bulle:hover span, a.info_bulle:focus span{
display:inline;
} 
 
#magasin_txt {
margin-left:150px;
z-index:5;
border:0;
}
 
#sportswear_txt{
margin-left:0px;
z-index:4;
border:0;
}
 
#matos_txt{
margin-left:-240px;
z-index:3;
border:0;
}
 
#location_txt{
margin-left:-355px;
z-index:2;
border:0;
}
 
 
#magasin_btn {
margin-left:180px;
z-index:5;
}
 
#sportswear_btn{
margin-left:-15px;
z-index:4;
}
 
#matos_btn{
margin-left:-185px;
z-index:3;
}
 
#location_btn{
margin-left:-355px;
z-index:2;
}

Quelqu'un a-t-il une idée du pourquoi ?

Merci d'avance pour vos réponses

03/08/2010, 16h33
Bovino
Code:

1 2 3 4 5 6 7 a.info_bulle:hover{ border:0; } a.info_bulle:hover span, a.info_bulle:focus span{ display:inline; }
Vu qu'il n'y a pas de style normal de défini (sans :hover), le survol ajoute un style, mais lorsqu'il n'y a plus survol, il n'y a pas de style à réaffecter, c'est donc le :hover qui reste en vigueur.

Bonjour Bovino et merci de ta réponse

J'ai un peu modifié le html pour définir une classe pour les Span

Code:

1
2
3
4
5
<img id="img_christina" src="images/christina-sports.gif"/>
<a class="info_bulle" href="#"><img class="btnAccueil" id="location_btn" src="images/location-ski-snowboard.jpg"/><span class="spanImg"><img class="txtAccueil" id="location_txt" src="images/txtLocation.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="matos_btn" src="images/vente-ski-snowboard-materiel.jpg"/><span class="spanImg"><img class="txtAccueil" id="matos_txt" src="images/txtEquipement.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="sportswear_btn" src="images/vente-sportswear.jpg"/><span class="spanImg"><img class="txtAccueil" id="sportswear_txt" src="images/txtVente.gif"/></span></a>
<a class="info_bulle" href="#"><img class="btnAccueil" id="magasin_btn" src="images/christina-sports-magasin.jpg"/><span class="spanImg"><img class="txtAccueil" id="magasin_txt" src="images/txtMagasin.gif"/></span></a>

et le css en conséquence pour définir un comportement de base pour la classe des Span

Code:

1
2
3
4
5
6
7
8
9
10
11
a.info_bulle .spanImg{
display:none;
}
 
a.info_bulle:hover{
border:0;
}
 
a.info_bulle:hover .spanImg, a.info_bulle:focus .spanImg{
display:inline;
}

le reste de la css ne change pas

mais toujours le même comportement dans IE6 alors que cela fonctionne sous FF et IE7.

04/08/2010, 09h34
Alexdezark
Bonjour à tous,

J'ai essayé de définir le style hors :hover de 2 façons :
Code:

1 2 3 a.info_bulle .spanImg{ display:none; }
ou
Code:

1 2 3 .spanImg{ display:none; }
sans succès...

J'espérais pouvoir faire une page qui ne nécessite pas l'utilisation de code javascript (celui ci pouvant être désactivé), maintenant tout ce que je voudrais savoir c'est si c'est possible sous IE6, dans ce cas c'est que j'ai fait une erreur quelque part, ou si ce n'est pas la peine de perdre du temps à ça.

Il faut tout de même se souvenir que même si IE6 est considéré comme obsolète, il représente encore plus de 7% des utilisateurs selon certaines études, et encore 20% selon d'autres (voir : http://blog.britoweb.net/post/2010/0...es-navigateurs)

cela reste plus que Chrome, Safari et opera réunis...

Je ne peux donc pas ignorer ce navigateur...

Merci d'avance pour vos réponses
07/08/2010, 15h55
Alexdezark

Bon puisque visiblement personne ne peut répondre à ma question pas la peine d'encombrer le forum avec.

Je vais utiliser javascript et tant pis pour ceux qui le désactivent de toutes façons il ne pourraient pas aller bien loin sur le site.

Bonne journée à tous
07/08/2010, 17h38
math55
Salut Alex,

je viens de voir ton message et ça m'a semblé être quelque chose de très commun lorsqu'on fait une page web. Je trouve étonnant que personne n'y ait apporté une réponse.

Dans ton css, tu as une class spanImg que je ne retrouve pas dans ton html. C'est peu être de là que vient ton problème. J'ai modifié un peu le css et ça a tout de suite fonctionné. J'ai testé dans IE6 avec IEtester. Tu me diras si ça marche chez toi.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 a.info_bulle span{ display:none; } a.info_bulle:hover{ border:0; } a.info_bulle:hover img.btnAccueil{ display:none; } a.info_bulle:hover span{ display:inline; }
http://www.w3schools.com/css/css_id_class.asp