Làm cách nào để kích hoạt sự kiện mouseout cho hai phần tử trong jQuery?

Question

Giả sử tôi có hai divs spearate, A và B, trong đó chồng lên nhau tại một góc:

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

Tôi muốn kích hoạt một sự kiện khi chuột rời cả A và B.

tôi đã cố gắng này

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

Nhưng điều này sẽ kích hoạt sự kiện nếu chuột rời khỏi nút. Tôi muốn sự kiện được kích hoạt khi con chuột không nằm trên một trong hai nút.

Có cách nào dễ dàng để thực hiện việc này không? Tôi đã có một ý tưởng liên quan đến các biến toàn cầu theo dõi trạng thái chuột trên mỗi div, nhưng tôi đã hy vọng cho một cái gì đó thanh lịch hơn.

Answer 1

tôi gặp phải vấn đề này tất cả các thời gian, và 'sửa chữa nhanh chóng' của tôi nếu nó phù hợp với những gì tôi đang làm như sau là;

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

Tôi đoán bạn có thể đạt được điều này bằng một cái gì đó như:

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

Nếu bạn tổ container thứ hai bên trong những người đầu tiên không có nhu cầu về một giải pháp jQuery phức tạp:

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'); 
});