Javascript 鼠标悬停从孩子冒泡

Question

我有以下 html 设置：

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

它的样式设置为您不能在不悬停其他 2 个 div 之一的情况下悬停 div1。 现在我在 div1 上有了鼠标悬停。
问题是当我从 content1 移动到 content2 时，我的 div1.mouseout 被触发，因为它们的 mouseout 正在冒泡。
并且事件的目标、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');
                }
            });

将鼠标输出更改为鼠标离开并且代码有效。 ..

Answer 1

为此，请使用 mouseleave 事件或 mouseout 来处理您的特定问题。 请参阅此处了解详细信息

来自有关差异的文档：

mouseleave 事件与 mouseout 事件的不同之处在于它处理事件冒泡的方式。如果本例中使用了 mouseout，那么当鼠标指针移出 Inner 元素时，就会触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave 事件仅在鼠标离开其绑定的元素（而不是后代元素）时触发其处理程序。因此，在此示例中，当鼠标离开 Outer 元素而不是 Inner 元素时，将触发处理程序。

标记示例：

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>

Answer 2

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

$('your_div').hover(function(){
  // your code here.
}, function(){// any mouse out code here})