probleme hover ie6

**calitom** · 05/09/2007, 16h06

Bonjour,

Je cherche à utiliser la fonction hover sur un div. Ca marche impec sous ie7, mais pas du tout sur ie6...
J'ai essayé d'utiliser le fichier .htc permettant d'activer le hover sur autre chose que la balise a pour ie6, mais ca ne marche pas...

Voici mon code:
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
97
98
99
100
101
102
103
 
 body { behavior:url("csshover.htc"); }
 
 .lefthandle:hover {
        border: 1px dotted #FF8C00;
	display: block;
	margin-top: 0px;
	left: 0px;
	background:url(doc/cursor_move.gif) no-repeat scroll 0% 100%;
	cursor: move;
	opacity: 0.700;
	width: 25px;
	height: 25px;
	float: left;
	position: absolute;
	top: auto;
 
}
 
  .lefthandle { margin: 0px;
   left: 0px;
	background: url(doc/blank.gif) repeat;
	color: Gray;
	display: block;
	margin-top: 0px;
	width: 25px;
	height: 25px;
	float: left;
	position: absolute;
	top: auto;
 }
 
  .box:hover {
	display: block;
	border: 1px Menu;
	background: InactiveBorder none repeat scroll 0% 50%;
	width: 250px;
	height: 123px;
	padding-left: 30px;
}
 
  .box {
   position: absolute;
	margin: 5px;
	padding-left: 30px;
	background: transparent none repeat scroll 0% 50%;
	width: 250px;
	height: 123px;
	z-index: 1;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	top: auto;
}
 
  .righthandle:hover {
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	background: url(doc/cursor_delete.gif) no-repeat scroll 0% 50%;
	border: 1px dotted #FF8C00;
	cursor: hand;
	color: rgb(238, 238, 238);
	opacity: 0.700;
	width: 25px;
	height: 25px;
	float: right;
	position: relative;
	top: auto;
	right: auto;
}
 
  .righthandle { margin: 0px;
   height: 25px;
	color: Gray;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	background: url(doc/blank.gif) repeat;
	width: 25px;
	float: right;
	position: relative;
	top: auto;
	right: auto;
 }
.carre_resize {
	width: 25px;
	height: 25px;
	RIGHT: 0px;
	CURSOR: se-resize;
	BOTTOM: 0px;
	POSITION: absolute;
	background: url(doc/cursor_resize.gif) no-repeat;
}
.carre_resize:hover {
	border: 1px dotted #FF8C00;
	width: 25px;
	height: 25px;
	RIGHT: 0px;
	CURSOR: se-resize;
	BOTTOM: 0px;
	POSITION: absolute;
	background: url(doc/cursor_resize.gif) no-repeat;
}

Ici les div utilisant les classes css ci dessus:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<DIV class=box id=boxHandle1 style="Z-INDEX: 3; FILTER: alpha(opacity=100); LEFT: 259px; TOP: 230px; opacity: undefined" onclick="changeZindex('boxHandle1')">
<DIV class=lefthandle id=lefthandle1></DIV>
<DIV class=righthandle id=righthandle1 onclick="delDiv('boxHandle1')"></DIV>
<DIV class=carre_resize onmousedown="init(event,'boxHandle1');" id=carre_resize1></DIV>
<DIV id=boxContent1 contentEditable=true>blabla</DIV></DIV>
 
<DIV class=box id=boxHandle2 style="Z-INDEX: 2; LEFT: 21px; TOP: 100px" onclick="changeZindex('boxHandle2')">
<DIV class=lefthandle id=lefthandle2></DIV>
<DIV class=righthandle id=righthandle2 onclick="delDiv('boxHandle2')"></DIV>
<DIV class=carre_resize onmousedown="init(event,'boxHandle2');" id=carre_resize2></DIV>
<DIV id=boxContent2 contentEditable=true>blabla</DIV></DIV>

Je ne vois pas trop d'où vient mon problème...
Peut être les en-têtes du fichier contenant les div?
Je les met au cas où le problème viendrait de là:

Code :

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

1
2
3
4
5
6
7
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
	<title>Editeur</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Merci d'avance pour votre aide.

**calitom** · 05/09/2007, 17h11

Je viens de faire des tests, et en fait ca marche...
Mais pas totallement.

En fait j'utilise un bouton qui ajoute un div dans la page.
Dans ce cas là, ca ne marche pas...

Par contre, si je met mon div dans la page directement, là ca marche...

En gros, si le div fait partir du code de la page, alors le hover marche, mais si j'ajoute le div en javascript après que la page ait été chargée, alors là ca ne marche plus...

Comment faire pour que ca marche meme si je rajoute le div apres en javascript?

**leFred** · 09/03/2009, 15h40

Bonjour

As tu trouver une solution à ton problème car je suis dans un cas similaire ?

Cordialement

Fred

**devyan** · 10/03/2009, 15h35

Il me semble que :hover n'est géré par IE6 que pour les balises <A>...

**leFred** · 10/03/2009, 18h19

Oui je sais mais en fait mon truc marche d'une certaine manière sauf que j'ai changer l'architecture car je dois actualiser une div via de l'ajax donc du coup ma page est "générée" via php, recuperé par ajax et réinjecté dans une div donc la ça ne fonctionne plus (problème d'imbrication surement) mais je me suis débrouillé en retravaillant mon bouton correctement en gif et en lui affectant un vieux mouseover des familles !!!

Merci quand même

probleme hover ie6

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

Discussions similaires

Partager

Partager