使用mouseover和mouseout代替:hover

时间:2013-07-12 14:30:15

标签: javascript css hover mouseover mouseout

对于我希望模拟css :hover伪类的项目,.hover类,我在mouseovermouseout事件中添加/删除。
问题是,这对性能有多大影响,差异有多大?
以下是一个示例:link

2 个答案:

答案 0 :(得分:2)

你想通过重写CSS在JavaScript中可以做什么来实现什么?

JavaScript几乎总是比CSS慢。在这种非常简单的情况下,它可能不会引人注意。但是,当你开始获得很多(并考虑典型网站的链接数量;例如,StackOverflow在此页面上大约有100个链接,单独;它会非常快地加起来),你会开始明显变慢-downs。

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

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

答案 1 :(得分:0)

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