IE8上的鼠标悬停/悬停效果很慢

Question

我在IE8中注意到在具有多行(本例中为100)的表上使用鼠标悬停事件时的奇怪性能.我已经尝试了很多不同的方法,但我似乎无法找到任何方法来获得它我喜欢/需要的速度.

如果我在每个事件上切换类,所有IE版本的性能都会下降,如果我通过javascript使用CSS直接操作CSS,IE6和IE7加速很多,但IE8仍然表现糟糕.

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

如果这只发生在IE6上,我可以理解并让它通过,但是当最新版本的浏览器是最慢的时候,只会有越来越多的用户体验不好.

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

编辑:我现在更新了示例,以便很容易看到有10行和200之间的区别.这是在同一个文档中,所以这对整个DOM大小来说不是问题,我猜

Answer 1

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

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>

Answer 2

顺便说一句，对于所有浏览器，您都可以使用 :hover 选择器，仅使用 css。并且仅对于 IE6，您可以添加最快的解决方案。