Afficher ou cacher un div

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

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

Voila la fonction pour cacher ou afficher le div

Code :

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 :

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

Envoyé par Décibel

Code :

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

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

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 :

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