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

Question

在使用 CSS :hover 命令或使用 onmouseover/onmouseout 时，Internet Explorer(在我的例子中是 IE7)变得缓慢并占用大量 CPU 时间有什么原因吗？

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

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

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

提示/想法？

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

Answer 1

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

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

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

检查此 example non-flicker CSS rollover 的源代码.

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