Comment déclencher un événement mouseout pour deux éléments dans jQuery?

Question

Supposons que j'ai deux divs spearate, A et B, qui se chevauchent dans un coin:

+-----+ 
|  | 
| A | 
| +-----+ 
+---|  | 
    | B | 
    |  | 
    +-----+ 

Je veux déclencher un événement lorsque la souris quitte deux A et B.

J'ai essayé cela

$("#a, #b").mouseleave(function() { ... }); 

Mais cela déclenche l'événement si la souris quitte l'un des nœuds. Je veux que l'événement soit déclenché une fois que la souris n'est pas sur l'un ou l'autre nœud.

Y at-il un moyen facile de faire cela? J'ai eu une idée qui impliquait des variables globales en gardant une trace de l'état de la souris sur chaque div, mais j'espérais quelque chose de plus élégant.

Answer 1

je rencontre ce problème tout le temps, et mon « solution miracle » si elle correspond à ce que je fais est la suivante;

var timer; 

$("#a, #b").mouseleave(function() { 
    timer = setTimeout(doSomething, 10); 
}).mouseenter(function() { 
    clearTimeout(timer); 
}); 


function doSomething() { 
    alert('mouse left'); 
} 

Fiddle: http://jsfiddle.net/adeneo/LdDBn/

Answer 2

Je suppose que vous pouvez y parvenir en utilisant quelque chose comme:

var mouseLeftD1 = false; 
var mouseLeftD2 = false; 

$('#d1').mouseleave(function() { 
    mouseLeftD1 = true; 
    if(mouseLeftD2 == true) setTimeout(mouseLeftBoth, 10); 
}).mouseenter(function() { 
    mouseLeftD1 = false; 
}); 

$('#d2').mouseleave(function() { 
    mouseLeftD2 = true; 
    if(mouseLeftD1 == true) setTimeout(mouseLeftBoth, 10); 
}).mouseenter(function() { 
    mouseLeftD2 = false; 
}); 

function mouseLeftBoth() { 
    if(mouseLeftD1 && mouseLeftD2) { 
    // .. your code here .. 
    } 
} 

Answer 3

Si vous imbriquer le deuxième récipient à l'intérieur de la première, il n'y a pas besoin d'une solution jQuery complexe:

http://jsfiddle.net/5cKSf/3/

HTML

<div class="a"> 
    This is the A div 
    <div class="b"> 
     This is the B div 
    </div> 
</div> 

CSS

.a { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

.b { 
    background-color: blue; 
    width: 100px; 
    height: 100px; 
    position:absolute; 
    top: 50px; 
    left: 50px; 
} 

JS

$('.a').hover(function() { 
    alert('mouseenter'); 
}, function() { 
    alert('mouseleave'); 
});