Bonjour;

j'ai actuellement un menu "déroulant" où une bulle apparaît dés que l'on pointe la sourie sur une partie du menu (dans le style de ce tuto : http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html, à la différence que le menu est verticale et les bulles apparaîssent de façon horizontale)

J'essai actuellement de faire en sorte que les bulles apparaîssent de manière progressive avec la fonction "fadeIn", mmais le problème est que dés que ma souris passe sur un élément autre (lien, bordure(!), liste contenu dans l'élement à qui s'applique la fonction, etc...) et bien il y a de nouveau une disparition puis réapparition de la bulle.



Code (x)html :

<li class="lien_menu_left">
<a href="#">Articles</a>
<div class="ss_menu_left" >
<ul>
<li>Gestion</li>
<li>Redaction d'un article</li>
</ul>
</div>
</li>

<li class="lien_menu_left">
<a href="#">Commentaires</a>
<div class="ss_menu_left" >
<ul>
<li>Gestion</li>
<li>En attente</li>
</ul>
</div>
</li>

Voici une partie du menu, mais de manière général c'est la même chose donc j'ai pris seulement 2 élements.


J'ai deux versions du code actuellement :

version 1 :

window.onload = script;

function script()
{

$('.ss_menu_left').hide();

$('li.lien_menu_left').mouseover(function() {
 
 var $nextDiv2 = $(this).children();
 $nextDiv2.fadeIn("normal");
 });

}

Cette version cache toutes les bulles au début, puis quand je passe sur le "li" du menu, la liste contenu par le li (et qui correspond à la bulle) apparaît et ne disparaît pas si je passe ma sourie sur un lien, etc... Bref le problème est réglé... Sauf que cela ne fonctionne qu'une fois ! En effet, après la bulle ne disparaît pas, résultat elle s'affiche directement quand je repasse la sourie, sans apparition progressive.

version 2 :

window.onload = script;

function script()
{



$('li.lien_menu_left').mouseover(function() {
 $('.ss_menu_left').hide();
 var $nextDiv2 = $(this).children();
 $nextDiv2.fadeIn("normal");
 });

}

La différence est que dés que la sourie passe sur le li, on efface la bulle, ainsi cela fonctionne en permanence, mais on trouve le problème du haut : si je passe sur un lien, le script pense que je sors de li puis que j'y revient, résultat, la bulle disparaît d'un coup puis réapparait, et c'est la même chose si je passe sur des bordures (or il y a des bordures entre chaque lien dans ma bulle, bref, c'est très gènant).

Le problème semble être lien à "children()" , en effet il prend en compte l'élément contenu mais pas tous les élèments commes les liens, bordures, etc... J'ai regardé s'il n'y aurait pas quelque chose d'équivalent qui prendrait vraiment TOUT ce que le "li" contient, mais je ne trouve rien :s
Et si je met une fonction comme "next()" et puis c'est le "li" suivant du menu qui disparaît, réapparatait, etc...




Auriez vous une idée pour que les bulles apparaîssent et s'en aille dés que je passe la sourie, sans qu'elle disparaîsse/apparaîsse si je passe sur un lien ou une bordure de la bulle, etc...

Utilise mouseenter et mouseleave à la place de mouseover et mouseout ?

Ah ! Je n'ai pas essayé avec mouseleave, mais mouseenter à régler mon problème , merci beaucoup, je ne connais pas énormement jquery (code peu en javascript), donc je ne connaissais pas cette fonction.
Merci beaucoup