css - 为什么 css .hover div 可能是 "blipping"？

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 上更改网站布局，或使用绝对 定位来防止这些元素影响其他元素。

例子

不稳定版本

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