在使用 CSS :hover 命令或使用 onmouseover/onmouseout 时,Internet Explorer(在我的例子中是 IE7)变得缓慢并占用大量 CPU 时间有什么原因吗?
我真的没有做任何复杂的事情,我的页面也不是特别大。
当我将鼠标移到页面上的任何其他位置(没有任何变化)时,iexplore.exe 保持在 0%,但是一旦我开始移动任何具有 onmouseover/onmouseout 或附加了 CSS 悬停类的元素,事情变得非常缓慢和缓慢,CPU 使用率变高。
该页面在 Firefox、Chrome 和 Safari 中运行良好,没有任何速度问题/迟缓。
提示/想法?
编辑:onmouseover/onmouseout 位于
最佳答案
您需要一个非闪烁 CSS 翻转(它不会随着每次微小的鼠标移动而触发持续的“悬停”信号)。在悬停时交换图像通常效果不佳,尤其是在 IE 中。 在没有 Javascript 库的情况下执行此操作的最佳方法是将所需的“悬停”图像作为背景到您悬停的元素下方 ,非悬停图像作为前面元素的背景。 然后对于 前面 元素的 CSS 检查此 example non-flicker CSS rollover 的源代码. 根据您的标记,您可能需要调整 关于CSS Hover 和 onmouseover/out 在 Internet Explorer 中导致 15-20% 的 CPU 使用率,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/1463310/
相关文章:
java - 使用 while(true){//Processes } 是否有效?
internet-explorer - jquery.ajax post 请求在 IE9 中缺少内容类型,在 Chrome 中有效
CSS 底部在 Internet Explorer 中不起作用
iphone - 带有 safari 的 iphone 中的黑色背景
javascript - jquery中switch和if中为什么推荐使用else if
html - 使用 Microsoft Edge 中的 HTML 超链接打开映射的 Windows 资源管理器文件夹
标签上(突出显示网格中的一行); CSS:hover 用于交换背景图像 url 的 标签。
:hover
状态,设置 background-image: none; background-color: transparent;
以便显示底层元素中所需的“悬停”图像。z-index
值以获得底层元素“前面”的顶部元素。