懸停在外部Div上時褪色

Question

這是我的問題

我有這樣的事情：

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

在這里我中間有一個div1，外面還有div2。

我還為整個頁面圖層設置了透明背景，根據某些情況它會變暗。

當我輸入div1時，我希望主體的背景（包括div2）變為黑色（div1除外）。 （我做到了）

當我退出div1時，鼠標仍然位於DIV2范圍內，我希望背景從黑色逐漸消失。 （如果我不使用下面的步驟，此方法也可行）。

但是，當我退出div2時，我想使背景完全不可見。 這意味着我應該中斷淡出。

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

這意味着我永遠不會在div2中淡出，而是直接退出div1時使背景不可見（而不是淡出背景）。

Answer 1

使用if語句並創建自己的淡入淡出函數，例如，調用淡入淡出。

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