Javascript Mouseover bouillonnant des enfants

Question

Ive a obtenu la configuration html suivante:

<div id="div1"> 
<div id="content1">blaat</div> 
<div id="content1">blaat2</div> 
</div> 

il est de style vous ne pouvez pas planer div1 sans planer un des 2 autres divs. Maintenant, j'ai un mouseout sur div1.
Le problème est que mon div1.mouseout est déclenché quand je passe de content1 à content2, parce que leurs mouseouts bouillonnent.
et les propriétés cible, currentTarget ou relatedTarget de l'événement ne sont jamais div1, car il n'est jamais plané directement ...
Je cherchais folle de cela, mais je ne peux trouver que des articles et des solutions pour les problèmes qui sont l'inverse de Ce dont j'ai besoin. Cela semble trivial mais je n'arrive pas à le faire fonctionner ...
Le mouseout de div1 ne devrait être déclenché que lorsque la souris quitte div1.

L'une des possibilités serait de mettre des données sur la souris et entrer mouseLeave, mais je suis convaincu que cela devrait fonctionner hors de la boîte, car il est juste un mouseout ...

EDIT:

bar.mouseleave(function(e) { 
       if ($(e.currentTarget).attr('id') == bar.attr('id')) { 
        bar.css('top', '-'+contentOuterHeight+'px'); 
        $('#floatable-bar #floatable-bar-tabs span').removeClass('active'); 
       } 
      }); 

changé le mouseout à mouseLeave et le code travaillé ...

Answer 1

Utilisez l'événement mouseleave au lieu ou mouseout pour cela, il gère votre problème spécifique. See here for details

De la documentation sur la différence:

L'événement mouseleave diffère de mouseout de la façon dont il gère l'événement bouillonnant. Si mouseout a été utilisé dans cet exemple, lorsque le pointeur de la souris est sorti de l'élément Inner, le gestionnaire est déclenché. C'est habituellement un comportement indésirable. L'événement mouseleave, d'autre part, ne déclenche son gestionnaire que lorsque la souris quitte l'élément auquel elle est liée, et non un descendant. Ainsi, dans cet exemple, le gestionnaire est déclenché lorsque la souris quitte l'élément Outer, mais pas l'élément Inner.

balisage Exemple:

<div id="outer"> 
    Outer 
    <div id="inner"> 
    Inner 
    </div> 
</div> 

Answer 2

la méthode hover a deux paramètres, d'abord pour la souris et en second pour la sortie du curseur.

$('your_div').hover(function(){ 
    // your code here. 
}, function(){// any mouse out code here})