正文 

当前位置： 首页 > 源码 >

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

     2023-02-22     66

关键词：

【中文标题】IE8 上的鼠标悬停/悬停效果缓慢【英文标题】：Mouseover/hover effect slow on IE8 【发布时间】：2010-12-04 08:14:10 【问题描述】：

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

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

有什么想法吗？我真的很想知道是什么让 mouseover 事件与所有其他浏览器相比执行如此缓慢。

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

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

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

【问题讨论】：

很想听到这个问题的答案，因为我遇到了完全相同的问题。问题是我不能使用 css :hover 解决方案，因为悬停事件必须更改与鼠标悬停的元素不同的元素的样式。 【参考方案1】：

:hover 在 IE8 上非常慢，无论您​​打算如何实现它。事实上，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>

【讨论】：

虽然我确实有这个问题，但是对于这个特定的例子，我的 IE8 运行得又快又好。 尝试将 100 行添加到您的样本中。然后打开您的任务列表 [Ctrl+Shit+Esc] 并观察 IExplore 如何在您在行上来回移动指针时达到最大 CPU。【参考方案2】：

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

【讨论】：

实际上不能，因为 :hover 仅适用于 a 元素。 仅在 IE6 中。所有其他浏览器都支持 :hover 任何元素。 是的，CSS 总是比 JavaScript 快。你真的应该只在你有的时候才使用JavaScript。【参考方案3】：

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

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

【讨论】：

我之前试过这个，效果一样，我做错了什么？它不起作用，例如：thedungheap.net/research/eventbubbling.aspx【参考方案4】：

你有没有试过看看如果每行只有一个会发生什么？好奇 DOM [或每行] 中的元素数量是否会影响性能。否则，可能是 ie8 在选择器引擎中遍历标签的方式存在问题。不是真正的答案，而是可以尝试的东西。

没有IE8，否则我自己试试。

【讨论】：

我只尝试了一列，这当然更快，但是如果我增加行数以使表内的元素数量相等，它又会变慢，所以它似乎被锁定了精确到表格标签内有多少元素。【参考方案5】：

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

您可以尝试 mouseover/mouseout 而不是切换。您还可以尝试事件委托，这通常有助于处理 dom 中的这么多元素。

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

【讨论】：

正如贾斯汀建议的那样，我尝试了事件冒泡（委托）但无法使其工作，请查看链接：thedungheap.net/research/eventbubbling.aspx 我也尝试了 mouseover/mouseout，但性能没有任何差异【参考方案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","");
);

我希望这对你有用。

【讨论】：

【参考方案7】：

很抱歉发布这么老的答案，但我认为它是相关的，而且这个页面在谷歌上排名很高，所以......

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

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

这对我来说是一个真正的问题，因为我遇到这个问题的项目是左右按钮/箭头上的悬停效果，我用它来为左右选项卡设置动画，选项卡将位于按钮下方，一个选项卡幻灯片，如果我可以说，当光标进入按钮区域时，普通图像会消失，下面的图像会在几毫秒内可见，然后，悬停图像最终会显示出来，很难看。

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

如果您想更好地了解 CSS 精灵：http://css-tricks.com/css-sprites/

【讨论】：

删除 WPF 中 ListView 上的鼠标悬停效果

】删除WPF中ListView上的鼠标悬停效果【英文标题】：RemovethemouseovereffectonaListViewinWPF【发布时间】：2013-06-1520:06:13【问题描述】：如何让我的ListView上的淡蓝色鼠标悬停效果？当我触摸屏幕时，会出现一个淡蓝色选择器，并在我上... 查看详情

如何删除 WPF 按钮上的默认鼠标悬停效果？

】如何删除WPF按钮上的默认鼠标悬停效果？【英文标题】：Howtoremovedefaultmouse-overeffectonWPFbuttons?【发布时间】：2011-04-2017:43:45【问题描述】：我的问题是，在WPF中，每当我尝试使用触发器或动画更改按钮背景的颜色时，默认的鼠... 查看详情

在 uwp 中模拟 fontIcon 上的鼠标悬停效果

】在uwp中模拟fontIcon上的鼠标悬停效果【英文标题】：SimulatingamousehovereffectonafontIconinuwp【发布时间】：2016-07-1503:28:36【问题描述】：我目前正在从事一个涉及使用汉堡菜单的uwp项目。到目前为止，我使用此代码生成了菜单<FontI... 查看详情

悬停效果不适用于 IE8

】悬停效果不适用于IE8【英文标题】：HovereffectsnotworkingwithIE8【发布时间】：2011-09-1007:42:26【问题描述】：我使用CSS来改变表格悬停时的颜色#tabbtbodytr:hovertdcolor:#006;background:#d0e4f2;这在Chrome和Firefox中运行良好，但在InternetExplorer8... 查看详情

手机上的剩余悬停效果

】手机上的剩余悬停效果【英文标题】：Leftoverhovereffectonmobile【发布时间】：2016-02-1623:14:23【问题描述】：我整天都在努力让这个JSFiddle也适用于手机，但我所有的尝试都没有效果。在桌面上，当用户将鼠标悬停在箭头上时，它... 查看详情

矩形上的文本会杀死矩形的悬停效果

】矩形上的文本会杀死矩形的悬停效果【英文标题】：Textonarectanglekillstherectangle\'shovereffect【发布时间】：2012-08-1705:01:50【问题描述】：我有几个带有悬停效果的svg矩形，当鼠标悬停在矩形上时，矩形的背景颜色会发生变化。悬... 查看详情

悬停在文本上时，悬停效果消失

...鼠标悬停在我的图片上时，我希望有一个颜色叠加层图片上的文字应该在悬停前后都可见，没有任何变化问题：当我将鼠标悬停在文本上时，颜色悬停覆盖消失（当我在Div中四处移动而不将其移动到文本上时它才可见）我尝试了... 查看详情

悬停效果上的角剑道网格行

】悬停效果上的角剑道网格行【英文标题】：AngularKendoGridRowonhovereffect【发布时间】：2019-02-1417:08:53【问题描述】：当用户将鼠标悬停在行上时，我想更改行的背景（有用的帮助，行跟踪）。我尝试使用[rowClass]将CSS类(&lt;class&... 查看详情

悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

...停在其中一个元素上时，我都会取消悬停在我悬停的元素上的效果。当我将鼠标悬停在id= 查看详情

表中 <hr> 的悬停效果

...尝试了各种方法，但似乎都没有奏效。当鼠标悬停在桌子上的任何地方时，如何让线像其他地方一样将颜色更改 查看详情

鼠标悬停时仅显示当前卡片悬停效果

】鼠标悬停时仅显示当前卡片悬停效果【英文标题】：onmouseovershowonlycurrentcardhovereffect【发布时间】：2021-07-0300:07:39【问题描述】：。目前，如果我的鼠标移到卡片上，那么它会显示每张卡片的效果。这在VueNuxtjs中怎么可能？我... 查看详情

带有“鼠标方向”的悬停的 jQuery 动画

...707:45:22【问题描述】：我正在尝试模拟将鼠标悬停在图像上的效果，叠加的半透明图像将从鼠标所在的方向淡入。反之亦然，当您的鼠标离开图像时（淡出+移开）我为此准备了testpage。去看看吧，它会弄清楚想要的效果是什么。... 查看详情

元素上的悬停效果在 CSS 中不起作用 [重复]

】元素上的悬停效果在CSS中不起作用[重复]【英文标题】：HovereffectonelementisnotworkinginCSS[duplicate]【发布时间】：2021-01-1819:18:19【问题描述】：当我将鼠标悬停在box1上时，我试图更改box2的颜色，但它不起作用。请帮助我为什么这... 查看详情

放大鼠标悬停效果

】放大鼠标悬停效果【英文标题】：magnifyeffectonmousehover【发布时间】：2013-05-0611:48:48【问题描述】：我有一个包含几个链接的导航栏。我希望在鼠标悬停时放大（增加大小）的链接。我希望其他链接处于各自的位置。我为此编... 查看详情

如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

】如何通过将鼠标悬停在同一页面上的图像上来触发CSS动画按钮【英文标题】：Howtotriggeracssanimatedbuttonbyhoveringoveranimageonthesamepage【发布时间】：2013-08-2501:17:58【问题描述】：我的网站出现问题。在主页上，我有一张图片。图片... 查看详情

鼠标悬停效果工具提示

】鼠标悬停效果工具提示【英文标题】：hovereffecttooltipfollowingmouse【发布时间】：2022-01-0618:29:04【问题描述】：我对css没有什么问题，我无法正常使用转换。如果工具提示有更多文本，那么鼠标和工具提示之间的空间就会很大。... 查看详情

html+css鼠标悬停效果

HTML+CSS实现鼠标悬停效果HTML：<linkhref="style.css"rel="stylesheet"><aclass="social"href="https://webbb.be"target="_blank"><divclass="front"><iclass="fafa-facebook"></i></div&g 查看详情

鼠标悬停图片移动的效果

...购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果，实现代码很简单，就用css3的transform便可实现。下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始位置。css... 查看详情