问题
Let's suppose I have two spearate divs, A and B, which overlap at a corner:
+-----+
| |
| A |
| +-----+
+---| |
| B |
| |
+-----+
I want to trigger an event when the mouse leaves both A and B.
I tried this
$("#a, #b").mouseleave(function() { ... });
But this triggers the event if the mouse leaves either node. I want the event to be triggered once the mouse is not over either node.
Is there an easy way to do this? I had an idea that involved global variables keeping track of the mouse state over each div, but I was hoping for something more elegant.
回答1:
I encounter this problem all the time, and my 'quick fix' if it fits what I'm doing is the following;
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/
回答2:
If you nest the second container inside the first there is no need for a complex jQuery solution:
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');
});
回答3:
I guess you can achieve this using something like:
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 ..
}
}
来源:https://stackoverflow.com/questions/8557492/how-can-i-trigger-a-mouseout-event-for-two-elements-in-jquery