hover avec IE6

**Alexdezark** · 03/08/2010, 16h28

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 :

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
<!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 :

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
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

**Bovino** · 03/08/2010, 17h33

Code :

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

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.

**Alexdezark** · 03/08/2010, 18h01

Bonjour Bovino et merci de ta réponse

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

Code :

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

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 :

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

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.

**Alexdezark** · 04/08/2010, 10h34

Bonjour à tous,

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

Code :

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

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

ou

Code :

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

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

**Alexdezark** · 07/08/2010, 16h55

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

**math55** · 07/08/2010, 18h38

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 :

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

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

hover avec IE6

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager