Question

我有一个父div和一些子div（一个包含一些按钮的框）。

我想在单击按钮时（在childDivContainer中的任何位置）淡化消息但我希望它保持可见，直到鼠标离开较大的父区域（greaterContainer）以防止消息恼人地弹出并一直消失，所以我把fadeOut（）连接到一个更大的包含div。

然而每当用户mouseOuts来自每个子div时都会触发fadeOut（） - 这很奇怪，因为我还没有将它们与鼠标悬停或其他任何东西相关联。

$('#childDivContainer').click(
    function () {
        $("#demoMessage").fadeIn();

    });

$('#largerContainer').mouseout(
    function () {
        $("#demoMessage").fadeOut();
    });


<div id="largerContainer">
   <div id="childDivContainer">
    <div id="childDiv1"></div>
    <div id="childDiv2"></div>
    <div id="childDiv3"></div>
   </div>
</div>

非常感谢您的帮助。西蒙

Answer 1

您需要将mouseout更改为mouseleave

<强>鼠标移出（）

当鼠标进入“outerBox”时，不会触发任何事件。
当鼠标离开“outerBox”并进入“innerBox”时，触发 “外箱”事件。
当鼠标离开“innerBox”并进入“outerBox”时，触发 “innerBox”事件，接着是“outerBox”事件。
当鼠标移动到“outerBox”时，触发“outerBox”事件。

<强>鼠标离开（）

当鼠标进入“outerBox”时，不会触发任何事件。
当鼠标离开“outerBox”并进入“innerBox”时，没有事件会开枪。
当鼠标离开“innerBox”并进入“outerBox”时，触发 “innerBox”事件。
当鼠标离开“outerBox”时，触发“outerBox”事件。

阅读：http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

Answer 2

当您将光标移到子div上时，可能会认为您的鼠标正在离开largerContainer并进入childDiv。

您可能会尝试在fadeOut()的父largerContainer事件上触发mouseenter()。

Answer 3

当你mouseout的{{1}}时（以及#child，事件起泡：

#parent

所以

2.   #parent -> fire mouseout
       ^
       |
    (mouseout event)
       |
1.    #child -> fire mouseout

将鼠标移出孩子会导致

jQuery('#parent, #child').on('mouseout',function(e){
  console.log("mouseout: #" + this.id);
});

答案：您需要停止事件传播（冒泡）并可能跟踪孩子的> mouseout: #parent > mouseout: #child事件（将鼠标移到mouseover实际上触发#child上的mouseout！）。

演示如何触发mouseout事件的简单示例http://jsfiddle.net/sequoia/Z9n96/

我在处理这类问题时所做的更复杂的例子（将停止传播行为附加/分离到不同事件并查看它如何改变行为）：http://jsfiddle.net/sequoia/GXmfA/4/

jQuery - 在不同的div上触发fadeIn（）和fadeOut（）

3 个答案: