1

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

我想在单击按钮时淡入消息（在 childDivContainer 中的任何位置），但我希望它保持可见直到鼠标离开较大的父区域（largerContainer）以防止消息烦人地弹出和消失，所以我已将 fadeOut() 连接到更大的包含 div。

但是，每当用户从每个子 div 中使用 mouseOuts 时都会触发 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>

非常感谢您的帮助。西蒙

4

3 回答 3

3

您需要更改mouseout为mouseleave

鼠标移出（）

  • 当鼠标进入“outerBox”时，不会触发任何事件。
  • 当鼠标离开“outerBox”并进入“innerBox”时，触发“outerBox”事件。
  • 当鼠标离开“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/

于 2013-03-19T15:26:15.107 回答
0

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

You might try to trigger the fadeOut() on the largerContainer's parent mouseenter() event.

于 2013-03-19T15:28:09.517 回答
0

When you mouseout of the #child (and into the #parent, the event bubbles thus:

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

so with

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

mousing out of the child would result in

> mouseout: #parent
> mouseout: #child

Answer: You need to play with stopping event propagation (bubbling) and possibly tracking the mouseover event on the child (as mousing over the #child actually triggers mouseout on the parent!).

Simple example to demonstrate the how the mouseout event is fired http://jsfiddle.net/sequoia/Z9n96/

More complex example I made when working on this sort of problem (play around with attaching/detaching the stop propogation behavior to different events and see how it changes the behavior): http://jsfiddle.net/sequoia/GXmfA/4/

于 2013-03-19T15:46:57.377 回答