我的网站上有一些“选项卡”（包含文本），当鼠标悬停时，选项卡会展开并显示更多文本。出于我们的意图和目的，选项卡是某种菜单。
但问题是，当鼠标悬停在上面时，选项卡会正确展开，因为悬停应该使它这样做，但然后很快“闪”回其原始大小，然后立即恢复到其悬停大小（只要鼠标仍然悬停在上面）原来的div）。事情是这样发生的：
用户悬停并且选项卡展开/（鼠标仍然在选项卡上）选项卡保持 .hover 属性大约 1 秒/（鼠标仍然在选项卡上）选项卡默认为原始属性大约 1/10 秒/（鼠标仍然在选项卡上) 选项卡返回到 .hover 属性大约 1 秒。
在鼠标悬停在选项卡上期间，这种情况会一直持续。
我在 Chrome 中几乎一直遇到这种情况，有时在 Safari 中，最不频繁，几乎从未遇到过这种情况，但有时在 FF 中仍然遇到这种情况。
我清除了缓存，清除了浏览数据（cookies和其他网站和插件数据），但仍然没有任何改善。然后我检查了我的计算机是否有更新，重新启动它，仍然是同样的问题。我也有超过 6 GB 的可用内存，运行在 2.5GHz 双核处理器上。
有什么想法可能是什么问题以及如何解决它吗？
thanks!
如果显示的元素:hover移动周围的元素或更改受影响元素的大小，这可能会导致鼠标不再指向原始元素，从而删除:hover。由于所有元素都会再次移动，因此会导致:hover效果如图所示。
这将导致闪烁，直到稳定为止:hover条件达到了。请注意，某些浏览器会检查:hover仅针对鼠标移动，而不针对布局更改 (FF)。
为了防止此类行为，您不应更改网站的布局:hover，或使用absolute定位以防止这些元素影响其他元素。
Examples
不稳定版本
#blipper {
position: absolute;
width: 200px;
border: 1px solid;
background-color: #ccc;
}
#blipper:hover {
left: 150px;
/* the hover effect is only stable in the rightmost 50 px */
}
<div id="blipper">Hover me</div>
稳定版
#blipper_stab {
/* fixed layout element wrapper */
width: 200px;
height: 2em;
/* needs height, since it contains only `position:absolute` elements*/
position: relative;
border: 1px solid green;
}
#blipper {
height: 2em;
position: absolute;
width: 200px;
border: 1px solid;
background-color: #ccc;
}
#blipper_stab:hover #blipper {
/* now based on the wrapper instead of the */
left: 150px;
/* blipper */
}
<div id="blipper_stab">
<div id="blipper">Hover me</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
