IE8上的鼠标悬停/悬停效果很慢 [英] Mouseover/hover effect slow on IE8

问题描述

我在IE8中注意到在具有多行（本例中为100）的表上使用鼠标悬停事件时的奇怪性能。我已经尝试了很多不同的方法，但我似乎找不到任何方法来尽可能快地获得它。

I have noticed a weird performance thing in IE8 when using mouseover events on a table with many rows (100 in this example). I have tried a lot of different approaches but I can't seem to find any way to get it as fast as I like/need.

如果我在每个方法上切换类事件在所有IE版本中性能下降，如果我通过javascript使用CSS直接操作CSS IE6和IE7加速很多，但IE8仍然执行糟糕。

If I switch classes on each event the performance goes down in all IE versions, and If I use direct manipulation of the CSS through javascript IE6 and IE7 speeds up alot, but IE8 still performs lousy.

任何想法？我真的想知道是什么让mouseover事件与其他所有浏览器相比都显得迟钝。

Any ideas ? I would really like to know what it is that makes the mouseover event to perform so sluggish compared to all the other browsers.

如果这只发生在IE6上，我可以理解并让它通过，但是当最新版本的浏览器是最慢的版本时，只会有更多和更多用户体验不佳。

If this only happened to IE6 I could understand and let it pass, but when the newest version of the browser is the slowest one, there is only going to be more and more users with a bad experience.

使用JQuery悬停的示例： http ：//thedungheap.net/research/

Example using JQuery hover: http://thedungheap.net/research/

编辑：我现在更新了示例，以便于查看有10行和200之间的区别。这是在同一个文档中，所以这不是整个DOM大小的问题，我猜

I have now updated the example so that it is easy to see the difference between having 10 rows and 200. This is in the same document, so this cannot be a problem with the whole DOM size, i guess

推荐答案

：无论你打算如何实现它，IE11上的悬停都非常慢。事实上，javascript onmouseover，onmouseout事件提供了比CSS更快的创建悬停效果的方法

The :hover IS very slow on IE8, no matter how you intend to implement it. In fact, the javascript onmouseover, onmouseout events provides way faster methods for creating a hover effect, than CSS does

IE8上最快的例子：

<table>
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'">
   <td>foo bar</td>
</tr>
</table>

较慢的示例：

<style type="text/css">
   tr.S1    {background-color:#000000}
   tr.S2    {background-color:#FFFFFF}
</style>
<table>
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'">
   <td>foo bar</td>
</tr>
</table>

非常慢的例子： JSFiddle

<style type="text/css">
   tr.S     {background-color:#000000}
   tr.S:hover   {background-color:#FFFFFF}
</style>
<table>
<tr class="S">
   <td>foo bar</td>
</tr>
</table>

这篇关于IE8上的鼠标悬停/悬停效果很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！