OnMouseOut sur un div [Résolu]

DevilYann · 13/03/2010, 00h31

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

nsanabi · 13/03/2010, 02h57

montre nous du code

SpaceFrog · 13/03/2010, 09h06

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

DevilYann · 13/03/2010, 09h45

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

SpaceFrog · 13/03/2010, 10h11

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

DevilYann · 13/03/2010, 11h16

Merci bien pour l'exemple

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

SpaceFrog · 13/03/2010, 12h45

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

DevilYann · 13/03/2010, 12h52

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 :

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

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 :

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

onmouseover="clearTimeout(gone)"

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

SpaceFrog · 13/03/2010, 13h26

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

DevilYann · 13/03/2010, 13h40

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

13/03/2010, 00h31	#1
DevilYann Candidat au titre de Membre du Club Inscription : juillet 2008 Messages : 61 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 61 Points : 10 Points : 10	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
	00

13/03/2010, 09h06	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	mets l'action du mousout de la div principale dans un setTimeout que tu annulera sur le mouseover des divs enfants __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

13/03/2010, 12h45	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	heu non suffit d'appeler une seule et même fonction depuis chaque div .. __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

13/03/2010, 13h26	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

13/03/2010, 02h57	#2
nsanabi Membre expérimenté nabil nayd Inscription : septembre 2003 Messages : 566 Détails du profil Informations personnelles : Nom : nabil nayd Informations forums : Inscription : septembre 2003 Messages : 566 Points : 596 Points : 596	montre nous du code
	00

13/03/2010, 11h16	#6
DevilYann Candidat au titre de Membre du Club Inscription : juillet 2008 Messages : 61 Détails du profil Informations forums : Inscription : juillet 2008 Messages : 61 Points : 10 Points : 10	Merci bien pour l'exemple 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...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email