Question

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

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

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

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

使用JQuery hover的示例：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

您可以使用的所有浏览器的Btw：仅使用css的悬停选择器。只有IE6才能添加最快的解决方案。

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","");
});

我希望这对你有用。

Answer 7

很抱歉发布这个旧答案，但我认为这是相关的，这个页面排名靠谷歌......

哇，我只花了很多时间来解决这个问题，我尝试使用Javascript，但它仍然很慢。

如果您使用背景图像：

，这是一个解决方案

对我来说这是一个真正的问题，因为我遇到这个问题的项目是左右按钮/箭头的悬停效果，我用它来左右动态标签，标签会在按钮下面，一个标签幻灯片，如果我可以说，当光标进入按钮区域时，正常图像将消失，下面的图像将显示几毫秒，然后，悬停图像最终将显示，丑陋。

真正的解决方案是使用图像精灵，即使在纯css中也绝对没有滞后。我们的想法是拥有一个图像，其中包含所有不同的图像状态（正常/悬停/选择/非活动/等），您将图像设置为背景图像，并且您只需调整悬停效果的背景位置值，其他

如果你想更好地了解css sprites：http://css-tricks.com/css-sprites/

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

7 个答案: