悬停在外部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.
});