为什么一个css.hover div可能会“bl&”？ [英] why might a css .hover div be "blipping"?

问题描述

我在我的网站上有几个标签（包含文本），并且在悬停时，这些标签会展开并显示更多文字。为了我们的意图和目的，这些标签是各种菜单。

问题在于，当被淹没时，标签会随着悬停的执行而正确地展开，但会很快闪烁回原始大小，然后立即回到它的悬停大小（只要鼠标仍然在原始div上）。它发生的是这样的：
用户悬停和标签展开/（鼠标仍然在选项卡上）选项卡维持.hover属性约1秒/（鼠标仍然在标签上）选项卡默认为原始属性的大约1/10第二个/（鼠标仍在选项卡上）选项卡返回到.hover属性大约1秒钟。

此过程持续鼠标悬停在选项卡上。

几乎所有的时间我都会在Chrome中遇到这种情况，有时候在Safari中，最不经常，几乎从不，但仍然有时在FF中。

我清除了缓存，清除了浏览数据（cookie和其他网站和插件数据），仍然没有任何改进。然后，我检查了我的电脑的更新，重新启动了它，但仍然是同样的问题。我拥有超过6 GB的可用内存，运行在2.5ghz双核处理器上。

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

谢谢！

解决方案

code>：hover 会移动周围的元素或更改受影响的元素的大小，这可能导致鼠标不再指向原始元素，从而删除：hover 。由于所有元素都会再次移动，因此会显示：hover 效果。

这会导致直到稳定的：hover 条件得以实现。请注意，有些浏览器只会在鼠标移动时检查：hover ，而不是在布局更改（FF）上。

要防止这种行为，您不应该在：hover 上更改网站布局，或者使用绝对定位来阻止这些行为元素影响其他元素。

示例

不稳定版本

  #blipper {position：absolute;宽度：200px; border：1px solid; background-color：#ccc;}＃blipper：hover {left：150px; / *悬停效果只在最右边的50 px * /}中保持稳定 

 < div id =blipper>悬停我< / div>  

稳定版

#blipper_stab {/ * fixed布局元素包装* / width：200px;身高：2em; / *需要高度，因为它只包含`position：absolute`元素* / position：relative; border：1px solid green;}＃blipper {height：2em;位置：绝对;宽度：200px; border：1px solid; background-color：#ccc;}＃blipper_stab：hover #blipper {/ *现在基于包装器而不是* / left：150px; / * blipper * /}

< div id = blipper_stab> < div id =blipper>悬停我< / div>< / div>

b

I have a few "tabs" on my site (containing text), and when hovered, the tabs expand and show more text. For our intents and purposes, the tabs are a menu of sorts.

The problem though is that when moused over, the tab expands properly as the hover should make it do, but then very quickly "blips" back to its original size, then instantly back to its hover size (as long as the mouse is still over the original div). It happens like this: user hovers and tab expands / (with mouse still on tab) tab maintains .hover properties for around 1 second / (with mouse still on tab) tab defaults to original properties for maybe 1/10th of a second / (with mouse still on tab) tab returns to .hover properties for around 1 second.
And this continues for the duration the mouse is over the tab.

I'm experiencing this almost all the time in Chrome, sometimes in Safari, and least frequently, almost never, but still sometimes in FF.

I cleared the cache, cleared browsing data (cookies and other site and plug-in data) and still no improvement. I then checked my computer for updates, re-started it, and still the same problem. I have over 6 GB of free memory too, running on a 2.5ghz dual core processor.

Any ideas what the problem could be and how to solve it?

thanks!

解决方案

If the element that gets shown on :hover moves the surrounding elements or change the affected element's size it can result in your mouse not longer pointing on the original element, thus removing :hover. Since all elements will move again it will result in the :hover effects shown.

This will result in blipping until a stable :hover condition is achieved. Note that some browsers will check :hover only on mouse movement, not on layout change (FF).

To prevent such behavior you shouldn't change the layout of your website on :hover, or use absolute positioning to prevent those elements from effecting other elements.

Examples

Unstable version

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

Stable version

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

这篇关于为什么一个css.hover div可能会“bl&”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！