IE8上的鼠标hover/hover效果很慢

我在IE8中发现了一个奇怪的性能问题，当在一个有很多行的表上使用鼠标hover事件时（本例中为100）。 我已经尝试了很多不同的方法，但我似乎无法找到任何方法来获得它我喜欢/需要的速度。

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

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

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

使用JQueryhover的示例： http ： //thedungheap.net/research/

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

Answer 1

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

IE8上最快的例子：

 
 
foo bar
 
  

较慢的例子：

  
 
 
foo bar
 
  

很慢的例子： JSFiddle

  
 
 
foo bar
 
  

Answer 2

顺便提一下你可以使用的所有浏览器：仅使用css的hover选择器。 只有IE6才能添加最快的解决方案。

Answer 3

尝试使用事件冒泡。 仅将hover事件添加到表中，然后查看目标元素。

 $(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

对我来说似乎足够快，没有实际查看指标。

您可以尝试鼠标hover/鼠标移除而不是切换。 您还可以尝试事件委派，这通常有助于dom中的这么多元素。

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

Answer 6

我遇到了这个问题并实施了以下解决方法

 var viewTable = jQuery("table.MyTable"); var temDiv = jQuery("
").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，但它仍然很慢。

如果您使用背景图像，这是一个解决方案：

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

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

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