使用 mouseover 和 mouseout 而不是 :hover

Posted 2023-05-08

【中文标题】使用 mouseover 和 mouseout 而不是 :hover

【英文标题】：Using mouseover and mouseout instead of :hover

【发布时间】：2013-07-11 03:18:45

【问题描述】：

对于一个项目，我想用 .hover 类模拟 css :hover 伪类，我在 mouseover 和 mouseout 事件上添加/删除它。 问题是，这对性能有多大影响，差异有多大？ 这是一个例子：link

【参考方案1】：

您希望通过重写 CSS 在 javascript 中的功能来实现什么？

JavaScript 几乎总是比 CSS 慢。在像这样非常简单的情况下，它可能不会引起注意。然而，当你开始得到很多时（想想一个典型网站的链接数量；例如，*** 在这个页面上大约有 100 个链接；它加起来非常快），你会开始变得明显变慢-downs。

其中一个主要原因是您必须启动 JavaScript 处理器，找到与 JavaScript 搜索匹配的所有元素，并向其中添加事件侦听器。此外，JavaScript 对硬件加速的访问与 CSS 不同。当您开始包含 CSS 可以执行的过渡和转换时，这开始成为一个主要因素。

也不要忘记考虑开发和维护时间。大多数人会期望您声明的行为出现在 CSS 中。当他们在那里找不到它时，他们将不得不四处挖掘，然后通过 JavaScript 代码进行心理解析以找到您的伪悬停代码。这需要时间和精力更好地花在其他事情上。

【参考方案2】：

性能取决于个人用户的计算机。除非禁用 JavaScript，否则您很可能在任何机器上都看不到任何差异。您可能希望考虑包含一些 CSS，以在用户禁用 JavaScript 的情况下对此进行补偿。