5

我有以下 html 设置：

<div id="div1">
<div id="content1">blaat</div>
<div id="content1">blaat2</div>
</div>

它的样式是这样的，所以你不能悬停 div1 而不悬停其他 2 个 div 之一。现在我在 div1 上有一个鼠标悬停。
问题是当我从 content1 移动到 content2 时，我的 div1.mouseout 被触发，因为它们的 mouseouts 正在冒泡。
并且事件的目标，currentTarget 或relatedTarget 属性永远不会是div1，因为它永远不会直接悬停......
我一直在为此疯狂搜索，但我只能找到与我需要的相反的问题的文章和解决方案。这似乎微不足道，但我无法让它工作......
div1 的 mouseout 应该只在鼠标离开 div1 时触发。

一种可能性是在鼠标进入和鼠标离开时设置一些数据，但我相信这应该开箱即用，因为它只是一个鼠标退出......

编辑：

bar.mouseleave(function(e) {
                if ($(e.currentTarget).attr('id') == bar.attr('id')) {
                    bar.css('top', '-'+contentOuterHeight+'px');
                    $('#floatable-bar #floatable-bar-tabs span').removeClass('active');
                }
            });

将 mouseout 更改为 mouseleave 并且代码有效...

4

2 回答 2

13

使用mouseleave事件代替或mouseout为此，它处理您的特定问题。 详情见这里

从有关差异的文档中：

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

Example markup:

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
于 2010-03-15T12:53:09.037 回答
2

该hover方法有两个参数，第一个用于鼠标输入，第二个用于鼠标输出。

$('your_div').hover(function(){
  // your code here.
}, function(){// any mouse out code here})
于 2010-03-15T12:53:00.833 回答