:hover 和 mouseout 事件是否应该具有相同的“触发”原因？答案

【问题标题】：Should :hover and the mouseout event have the same "firing" causes?:hover 和 mouseout 事件是否应该具有相同的“触发”原因？
【发布时间】：2015-04-23 13:14:10
【问题描述】：

当我编写一个 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 是相同的，并且只有在 :hover 结束的情况下才会调用 onmouseout并且仅在相同的情况下）。所以我的问题是：onmouseout 和 :hover 的反义词之间是否/应该有什么区别？

【问题讨论】：

我想这些答案，也回答你的问题stackoverflow.com/questions/608788/…
您是否为文档设置了 DOCTYPE？
@LinkinTED 那里的答案很有趣，但没有看到任何直接回答我的问题。从我在那里读到的答案与我的想法相同：mouseover + mouseout = :hover 本质上（我在上面观察到的情况并不总是这样，因为 mouseout 在与 :hover 结束时不同的时间触发我） .
@AliSheikhpour 是的。位于 html 文档的开头（只是双重检查）

标签： html css

【解决方案1】：

这是 jQuery mouseout 和 mouseleave 事件之间的相同区别：

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

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

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

Here's a good referal 关于这两种不同的行为

【讨论】：