Question

这是我的问题

我有这样的事情：

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

这里我在中间有一个div1，还有外面的div2。

我还有一个透明的背景，整个页面层根据某些事情变暗。

当我输入div1时，我希望身体的背景（包括div2）变成黑色（div1除外）。（我知道了）

当我退出div1时，但是鼠标仍在WITHIN 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.
});

悬停在外部Div上时褪色

2 个答案: