鼠标悬停/悬停效果上IE8缓慢(Mouseover/hover effect slow on IE8

在带有许多行（100在这个例子中）表鼠标悬停事件时，我已经在IE8中发现一个奇怪的表现的东西。我已经尝试了很多不同的方法，但我似乎无法找到任何方式来获得它一样快，我喜欢/需要。

如果我交换机上的每个事件类的性能下降在所有IE版本，如果我通过JavaScript IE6使用CSS的直接操纵和IE7很多的加快，但IE8仍然表现糟糕。

有任何想法吗？我真的想知道它是什么，使鼠标悬停事件相比，所有其他浏览器进行如此低迷。

如果这只是发生在IE6我能理解，并让它通过，但在浏览器的最新版本是最慢的一个，也只会是越来越多的用户有不愉快的经历。

实施例使用JQuery悬停： http://thedungheap.net/research/

编辑：我现在已经更新的例子，这样很容易看到有10行，200这是在同一文件中的区别，所以这不可能是与整个DOM化的问题，我猜

Answer 1:

该：悬停很慢于IE8，不管你打算如何实现它。事实上，由JavaScript的onmouseover，事件鼠标移开为创建悬停效果更快的方式方法，比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:

顺便说一句对所有的浏览器可以使用：只使用CSS悬停选择。只为IE6你可以添加你最快soluton。

Answer 3:

尝试使用事件冒泡。悬停事件添加到只有桌子，然后看目标元素。

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});

Answer 4:

你有没有尝试看看会发生什么，如果你只有每行一个？好奇，如果它是在DOM元素数[或在每行中]可能会影响性能。否则，它可能是与IE8遍历在选择发动机标签的方式的问题。不是一个真正的答案，但一些尝试。

没有IE8或我自己试试吧。

Answer 5:

似乎不够快给我，实际上并没有在看指标。

你可以尝试/鼠标移出的切换，而不是鼠标悬停。您也可以尝试事件委托，这往往与DOM中的这些元素帮助。

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });

Answer 6:

我面临这个问题，并实施了以下的解决方法

var viewTable = jQuery("table.MyTable");
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body");
var highlightColor = temDiv.css("background-color");
viewTable.mouseover(function(eventObj){
    jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor);
}).mouseout(function(eventObj){
    jQuery(eventObj.target).parents("tr:first").css("background-color","");
});

我希望这可能是对你有用。