[Résolu] [Jquery] le mouseout se déclanche au mauvais moment

Bonjour,

J'ai 6 div de classe .groupe dans ma page. Chacune est composée de 3 autres div à l'intérieur, .capture, .titre et .expend. Le code donne ceci :

<div class="groupe">
<div class="capture"></div>
<div class="titre"> </div>
<div class="expend"></div>
</div>

La div .capture est une image qui prend les 3/4 la hauteur et .titre est un texte avec une image d'arrière-plan.

Au début de mon script, je cache tous les div .expend visibles avec cette ligne :

$(".groupe .expend:visible").hide()

Je souhaite afficher chaque div .expend lors du survol de la div .groupe parent et la masquer à nouveau lors de le sortie du survol de la div .groupe. J'ai donc écris ceci :

$(".groupe").mouseover(function(){
$(this).find('.expend').fadeIn();
});
	
$(".groupe").mouseout(function(){
$(this).find(".expend").hide();
});

Le mouseover fonction très bien, c'est au niveau du mouseout dont j'ai un souci. Voici ce qui se passe. Je survol la div .groupe par le haut, par la div .capture (qui prend la quasi hauteur de la div .groupe) et le mouseover se déclenche. Lorsque je descends la souris pour me rendre vers la div .expend qui vient de s'afficher, je survol la div .titre. En passant de la div .capture à la div .titre, le script considère que je viens de quitter la div .groupe et déclenche le mouseout, bien que je sois toujours dans la div .groupe puisque .capture et .titre sont des enfants de .groupe.

Comment faire ? Comment puis-je écrire mon script pour qu'il prenne le mouseout au bon moment et non lorsque je me déplace à l'intérieur de la div .groupe ?

Merci à ceux qui répondront.

Salut,

Es-tu sur que ta div .groupe s'ajuste en hauteur à la taille de tes trois div fille et ne se limite pas seulement à la div .capture ?

Oui, j'ai déjà vérifié ce détail. Voici le code :

.groupe { width:300px; height:160px; display:inline-block; margin:5px 20px 6px 0px; position:relative;}
.groupe :hover { cursor:pointer;}
.groupe .capture { height:100px;}
.groupe .titre { background:url(../images/groupe-expend-bg.gif); height:30px; line-height:30px; padding-left:22px; font-size:0.9em;}
.groupe .expend { background:#000; height:30px;}

Je viens de placer l'exemple sur une page test de mon site à cette adresse : http://www.jmndesign.be/test/test.jmn.html

Merci à ceux qui chercheront ou qui connaissent déjà la réponse.

Hello, c'est effectivement le comportement des événement mouseover / mouseout. Si tu as des éléments enfants dans l'élément sur lequel tu bindes tes evénéments, bah ça suit pas.

Je te suggère d'utiliser mouseenter et mouseleave qui fonctionnent dans ce cas.

voir aussi : mouseenter vs mouseover jquery

Je teste cela ce soir et je te tiens au courant. Merci pour l’information.

Tout fonctionne correctement et le bug est corrigé. Merci d'avoir partagé ce lien, il m'a été très utile.