html - 应该是:hover and the mouseout event have the same "firing" causes?

Question

当我编写一个 aspx 站点时，我遇到了一个问题，即有几个元素并显示在其他元素之上(由于位置:固定)的 div 变得不可见，尽管我希望相反。

如果鼠标离开它包含的区域，这个 div 将不可见。我使用了看起来很简单的方法:

<div id="xyz" onmouseout="JavaScript: $('#xyz').hide();">....</div>

当我离开为 div 定义的填充区域并进入元素，或元素之间的空间(div 内的元素)时触发此事件，....

现在我改用 css 来执行隐藏:

#xyz.HideOnNotHovered { display: none; }
#xyz.HideOnNotHovered:hover { display: inline-block; }

按预期工作。因此，无论我的鼠标指针在 div 中的什么位置，它都是可见的，只有当它离开 div 时，div 才会消失。

这种情况(由于涉及复杂的 css 和 javascript 层，我无法在 jsfiddle 中重新创建，我无法将其放入其中)产生了一个问题:

刚开始思考这个问题时，我认为onmouseout事件和:hover的结束套路本质上是一样的(或者说onmouseover和:hover是一样的，onmouseout只是在:hover结束的情况下被调用)并且仅在相同情况下)。所以我的问题是:onmouseout 和 :hover 的反面是否/应该有什么区别？

Answer 1

这与 jQuery mouseout 和 mouseleave 事件之间的区别相同:

• mouseleave 仅在光标离开目标元素时触发 - exemple
• mouseout 每次光标离开目标元素时都会触发 AND 悬停在子元素上 - exemple

---

这与 javascript 中的 :hover (css) 和 onmouseout 行为相同:

• :hover 在光标位于目标元素内时应用 - exemple
• onmouseout 每次光标离开目标元素时都会触发 AND 悬停在子元素上 - exemple

---

Here's a good referal on this two different behaviours