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

Ale*_*lex 5 css performance internet-explorer

是否有任何理由为什么Internet Explorer(在我的情况下是IE7)在使用CSS:hover命令或使用onmouseover/onmouseout时会变得迟钝并占用大量的CPU时间?

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

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

该页面在Firefox,Chrome和Safari中完美运行,没有任何速度问题/迟缓.

提示/想法?

编辑: onmouseover/onmouseout在<tr>标签上(突出显示网格中的一行); CSS:hover用于交换背景图像网址的<a>标签.

Dav*_*itt 6

您需要一个非闪烁的 CSS翻转(不会在每次微小的鼠标移动时触发连续的"悬停"信号).在悬停时交换图像通常不能很好地工作,尤其是在IE中.

在没有Javascript库的情况下执行此操作的最佳方法是将所需的"悬停"图像作为您正在悬停的元素下方元素的背景,并将非悬停图像作为前面元素的背景.

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

检查此示例非闪烁CSS翻转的源代码.

根据您的标记,您可能需要调整该z-index值以获得底层元素的"前面"元素.