OnMouseOut sur un div

Version imprimable

13/03/2010, 00h31
DevilYann

OnMouseOut sur un div

Bonjour à tous

Je fais un OnMouseOver sur un div mon_div qui affiche un bloc, puis un OnMouseOut pour fermer ce bloc.
Or le div mon_div contient une image, un titre et un autre div.

Le OnMouseOut est alors déclanché sur chaque sortie des éléments de mon_div...

Comment faire pour ne le déclencher qu'une seule fois, à la vrai sortie de mon_div et non pas de chaque élément de celui-ci ?

Merci d'avance ;)
13/03/2010, 02h57
nsanabi

montre nous du code
13/03/2010, 09h06
SpaceFrog

mets l'action du mousout de la div principale dans un setTimeout que tu annulera sur le mouseover des divs enfants
13/03/2010, 09h45
DevilYann

Citation:

Envoyé par SpaceFrog

mets l'action du mousout de la div principale dans un setTimeout que tu annulera sur le mouseover des divs enfants

T'aurais pas un tout petit exemple basique illustrant ta solution please ?... :oops:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
html, body {height:100%
			width:100%;}
#foo { height:300px;
       width:300px;
       line-height:0;
       font-size:0;
       background-color:red;}
#bar { position:relative;
       height:100px;
       width:100px;
       margin: 0 auto 0 auto;
       background-color:green;
       top:100px;      
       }
 
</style>
<script type="text/javascript">
var gone
function leave(){
gone=setTimeout(function(){alert('sorti');},10)
}
</script>
 
</head>
 
<body>
<div id ="foo" onmouseout="leave()" onmouseover="clearTimeout(gone)">
	<div id="bar" onmouseover="clearTimeout(gone)"></div>
</div>	
</body>
 
</html>

13/03/2010, 11h16
DevilYann

Merci bien pour l'exemple :ccool:

Mais va falloir que je trouve une autre solution, car mon div contient une multitude d'éléments, et je fais cette opération sur 6 div de la page.

Donc cela alourdirait le code HTML...
13/03/2010, 12h45
SpaceFrog

heu non suffit d'appeler une seule et même fonction depuis chaque div ..
13/03/2010, 12h52
DevilYann

Citation:

Envoyé par SpaceFrog

heu non suffit d'appeler une seule et même fonction depuis chaque div ..

J'ai 6 div sur lesquels faut que je mette

Code:

onmouseout="leave()" onmouseover="clearTimeout(gone)"

A l'intérieur de chaque div, il va y avoir environ 5 éléments (une image, un titre, 2 ou 3 divs). Donc chaque élément va recevoir le code suivant

Code:

onmouseover="clearTimeout(gone)"

Donc cela fait bcp de onmouseover / onmouseout sur le code pour un simple effet d'affichage que je voulais faire non ?
13/03/2010, 13h26
SpaceFrog

ha il ne faut pas trop de onmouseover ni de onmouseout ?
Si le d'avoir à l'ecrire dans le code te dérange, tu peux l'appliquer dynamiquement avec js et encore plus simplement avec jquery
13/03/2010, 13h40
DevilYann

Citation:

Envoyé par SpaceFrog

ha il ne faut pas trop de onmouseover ni de onmouseout ?
Si le d'avoir à l'ecrire dans le code te dérange, tu peux l'appliquer dynamiquement avec js et encore plus simplement avec jquery

Disons que je n'aime pas trop surcharger le code HTML. Mais en effet je peux le faire dynamiquement, j'utiliserai pour cela prototype ;)