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