Discussion :

[Décibel]

Je n'ai rien trouvé dans la FAQ, mais pourtant la chose me parait bien simple...

J'ai un texte qui fait apparaitre un div dans une page.

Code :

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

<a href="mapage.php" onMouseOver="MM_showHideLayers('menud1','',show)">LIEUX DE VIE</a>

Voila la fonction pour cacher ou afficher le div

Code :

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

1
2
3
4
5
6
7
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

J'ai mis sur le div

Code :

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

<div id="menud1" onMouseOver="MM_showHideLayers('menud1','','hide')">

Mais dans ce div il y a une liste de liens et dès que la souris passe sur un lien, le div se cache...
Comme si la souris sortait du div.
Comment faire pour que le div ne se cache que quand la souris n'est plus sur le div et qu'il ne se passe rien quand la souris passe sur les liens dans le div ?

[ZeroDivide]

Code :

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

<div id="menud1" onMouseOver="MM_showHideLayers('menud1','','hide')">

Bah la tu caches le div quand la souris passe dessus, même pas le temps d'aller sur un lien

[Décibel]

Oui tu as raison j'avais bien mis out et non over

Code :

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

<div id="menud1" onMouseOut="MM_showHideLayers('menud1','','hide')">

et le résultat est le même...

[ZeroDivide]

Oui c'est une problème assez classique avec la propagation des évènements.

Personnellement j'utilise JQuery qui propose des solutions clefs en main avec .mouseenter() et .mouseleave() et je me casse pas la tête avec ca
Il embarque également tout ce qu'il faut pour manipuler les éléments (cacher, déplacer, redimentionner etc etc).

La solution simple avec JQuery:
dans ton header

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type='text/javascript'>
 $(document).ready(function() {
	$('#lelien').mouseover(function() {
		$('#menud1').show();
	});
	$('#menud1').mouseleave(function() {
		$('#menud1').hide();
	});
 });
</script>

et dans le corps HTML

Code :

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

1
2
3
<a id="lelien" href="mapage.php">LIEUX DE VIE</a>
 
<div id="menud1">bla bla</div>