如何：在浏览器上实现悬停

Question

我最近与一位同事讨论过：hover伪类选择器通常是如何在浏览器中实现的。问题涉及幕后实际发生的事情，当指针​​悬停在网站上的元素时。 “：悬停在触摸设备上”是一个问题，已经详尽地讨论过了。

我的理解是，实现：hover选择器是为了在处理网站上的标准行为时创造一些便利，这意味着它最终会触发mouseover / mouseout事件并为您节省一些繁琐的JavaScript代码。

另一方面，我的同事表示不涉及任何事件。最后，除了被识别和处理的元素状态的变化之外，没有其他事情发生。

我终于最终挖掘了网络：

http://www.w3.org
https://developer.mozilla.org

但我没有找到任何真正的答案 所以我终于问社区了！

编辑：

感谢您的第一次回复。 但是挖得更深，我发现这个让我再想一想的是：
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/
如果：与可见性操作组合悬停触发双标签，这最终是一个事件，状态和事件之间似乎仍然存在某种联系。即使它是有缺陷的行为。

Answer 1

：hover是CSS（层叠样式表）语言的一部分。对于Safari，此语言在Webkit中实现，Webkit是浏览器的布局引擎。 （请参阅此other layout engines的其他浏览器列表）。对伪类的支持：在Webkit中悬停是用C ++完成的;您可以查看源代码here。

Webkit的源代码将PseudoClassHover定义为枚举值为零的标志列表中的数值，如下所示：

PseudoClassHover = 1 << 0,

另一个函数添加了以下定义：

DEPRECATED_DEFINE_STATIC_LOCAL(String, hover, (ASCIILiteral("hover")));

确定伪类是否涉及：悬停是在嵌套在循环中的以下else-if语句中确定的：

else if (pseudoClass == hover)
            result |= PseudoClassHover;

该片段显示赋值运算符对变量result和PseudoClassHover执行按位OR，将生成的值赋给第一个变量结果。

源代码的下一部分表明您的同事至少在Safari方面是正确的;基于在应用按位AND之后返回值而发生状态改变。

case CSSSelector::PseudoClassHover:
        return forcedPseudoState & PseudoClassHover;

我承认这个答案只能部分解决这个问题。完全回答它是一项艰巨的任务，因为它需要检查所有其他浏览器使用的所有其他布局引擎的源代码，以确认它们是否具有类似的实现。检查源代码是一个很好的建议，前提是代码可供一个人阅读，就像开源软件一样。