为什么css .hover div可能会"昙花一现"？

Question

我的网站上有一些"标签"(包含文字),当悬停时,标签会展开并显示更多文字.对于我们的意图和目的,选项卡是各种菜单.

但问题是当鼠标悬停时,标签会在悬停时正确扩展,但很快就会"快速"回到原来的大小,然后立即回到悬停大小(只要鼠标仍然悬停)原来的div).它发生如下:用户悬停和选项卡扩展/(鼠标仍然在选项卡上)选项卡维护.hover属性约1秒/(鼠标仍然在选项卡上)选项卡默认为原始属性可能是1/10秒/(鼠标仍然在选项卡上)选项卡返回.hover属性约1秒钟.
并且这在鼠标悬停在标签上的持续时间内持续.

我几乎一直在Chrome中遇到这种情况,有时在Safari中,而且最不经常,几乎从不,但有时仍然在FF中.

我清除了缓存,清除了浏览数据(cookie和其他网站和插件数据)但仍然无法改进.然后,我检查了我的计算机的更新,重新启动它,仍然是同样的问题.我也有超过6 GB的可用内存,运行在2.5ghz双核处理器上.

任何想法可能是什么以及如何解决它？

谢谢!

Answer 1

如果显示的元素:hover移动周围的元素或更改受影响的元素的大小,则可能导致鼠标不再指向原始元素,从而删除:hover.由于所有元素将再次移动,因此将:hover显示所示效果.

这将导致闪烁,直到达到稳定:hover状态.请注意,某些浏览器:hover仅会检查鼠标移动,而不会检查布局更改(FF).

要防止此类行为,您不应更改网站的布局:hover,或使用absolute定位来防止这些元素影响其他元素.

例子

不稳定的版本

#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>