CSS Hover & onmouseover/out 在 Internet Explorer 中导致 15-20% 的 CPU 使用率答案

【问题标题】：CSS Hover & onmouseover/out causing 15-20% CPU Usage in Internet ExplorerCSS Hover & onmouseover/out 在 Internet Explorer 中导致 15-20% 的 CPU 使用率
【发布时间】：2011-03-22 18:28:09
【问题描述】：

在使用 CSS :hover 命令或使用 onmouseover/onmouseout 时，是否有任何原因导致 Internet Explorer（在我的情况下为 IE7）变得迟缓并占用大量 CPU 时间？

我真的没有做任何复杂的事情，我的页面也不是特别大。

当我将鼠标移动到页面上的任何其他位置（没有任何变化）时，iexplore.exe 保持在 0%，但是一旦我开始移动任何带有 onmouseover/onmouseout 或附加了 CSS 悬停类的元素，事情就会发生变得非常缓慢和缓慢，CPU 使用率变得很高。

该页面在 Firefox、Chrome 和 Safari 中运行良好，没有任何速度问题/迟缓。

提示/想法？

编辑： onmouseover/onmouseout 位于 标签上（突出显示网格中的一行）； CSS:hover 用于标签交换背景图片 url。

【问题讨论】：

你没有做任何复杂的事情，但你正在做一些事情。那么，你能展示你在做什么吗？如果你用CSS来做会不会有同样的效果？

是的，CSS 和 OnMouseOver/OnMouseOut 的结果相同。我唯一能想到的——我的页面中有很多 CSS 背景图像和不同的元素（可能总共大约 50 个）。但这不会导致任何其他浏览器出现问题。

标签： css performance internet-explorer

【解决方案1】：

您需要一个不闪烁 CSS 翻转（不会随着鼠标的每次微小移动触发连续的“悬停”信号）。在悬停时交换图像通常效果不佳，尤其是在 IE 中。

在没有 Javascript 库的情况下执行此操作的最佳方法是将所需的“悬停”图像作为背景到您悬停的元素下方，以及 非悬停 图像作为元素 在前面 的背景。

然后对于 在前面 元素的 CSS :hover 状态，设置 background-image: none; background-color: transparent; 以便显示底层元素中所需的“悬停”图像。

查看这个example non-flicker CSS rollover的源代码。

根据您的标记，您可能需要调整 z-index 值以使顶部元素位于底层元素的“前面”。

【讨论】：

【解决方案2】：

不做复杂的事情

嗯，你在做什么在？我只是通过更改背景 tr 颜色看到了这一点。 IE 好像不太擅长这个。

【讨论】：

那是（在 tr 上）我有 onmouseover/onmousout 的地方。这是一个网格，我需要以某种方式突出显示该行。 CSS:hover 位于锚标签上，悬停时切换背景图像 url。
不要更改 tr 上的背景图像，这是性能最差的。只要改变颜色，它会改善很多。
对不起，我不清楚。 tr 变化实际上只是颜色变化。锚标记是带有图像的标记。