2

我的网站上有一些“标签”（包含文本），当悬停时，标签会展开并显示更多文本。出于我们的意图和目的，选项卡是一种菜单。

但问题是，当鼠标悬停时，选项卡会像悬停一样正确展开，但很快就会“闪烁”回到原来的大小，然后立即恢复到悬停大小（只要鼠标还在原始 div）。它是这样发生的：用户悬停和选项卡展开/（鼠标仍在选项卡上）选项卡保持 .hover 属性约 1 秒/（鼠标仍在选项卡上）选项卡默认为原始属性可能为 1/10 秒/（鼠标仍在选项卡上）选项卡返回 .hover 属性约 1 秒。
这会在鼠标悬停在选项卡上时持续。

我几乎一直在 Chrome 中遇到这种情况，有时在 Safari 中，最不频繁，几乎从不，但有时仍然在 FF 中。

我清除了缓存，清除了浏览数据（cookies 和其他站点和插件数据），但仍然没有改善。然后我检查了我的计算机是否有更新，重新启动它，仍然是同样的问题。我也有超过 6 GB 的可用内存，运行在 2.5ghz 双核处理器上。

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

谢谢！

4

1 回答 1

6

如果显示的元素: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>

于 2012-06-17T14:11:19.480 回答