javascript - 使用 mouseover 和 mouseout 而不是 :hover

Question

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

Answer 1

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

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

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

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

Answer 2

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