衰落時，將鼠標懸停在股利

Question

外這裏是我的問題

我有這樣的事情：

----------------- 
|  ------ | 
|  |div1| | 
|  ------ | 
|div2   | 
|---------------| 

在這裏，我在中間有一個DIV1並且也有外界DIV2。

我也有一個整個頁面層的透明背景，根據一些事情變黑。

當我輸入div1時，我想讓body（包括div2）的背景變黑（div1除外）。 （我知道）

當我退出div1時，但鼠標仍然在WITHDIV2中，我希望背景從黑色中淡出。 （這個工作如果我不使用下面的步驟）。

但是當我離開div2我想充分使背景不可見。這意味着我應該打斷淡出。

我的問題是，當我進入div1（我使用mouseenter）時，它認爲我離開div2。

這意味着，我從來沒有DIV2中淡出，而是直接去製作背景，當我退出DIV1不可見的（而不是逐漸把它隱沒）語句

Answer 1

使用，如果並創建自己的淡入淡出功能例如調用淡出。

var ondiv1 = false 
var ondiv2 = false 

div1.mouseenter(function(){ 
    ondiv1 = true; 
}) 

div1.mouseleave(function(){ 
    ondiv1 = false; 
    //fadeout function for div2 called 

}) 

div2.mouseenter(function(){ 
    ondiv2 = true; 
}) 

div2.mouseleave(function(){ 
    ondiv2 = false; 
    if((ondiv2 == false) && (ondiv1 == false)){ 
     //call hide background function 
    } 

}) 

Answer 2

你可以做一個簡單的測試，以檢查是否新元素徘徊是DIV2的孩子。

div2.mouseleave(function(event) { 
    // Check if the new mouse target is a child of div2. 
    if($(event.currentTarget).parents().is(div2)) 
     return; 

    // Do fade. 
});