悬停时显示DIV闪烁 [英] On hover show DIV flicker

问题描述

我正面临着非常烦人的问题。
我有2个div，像bellow，第一个div是产品图片，第二个是覆盖图，当用户将鼠标悬停在产品图片上时应显示。
它确实有效，但是当图像悬停时，叠加层不会停止闪烁。
我通过设置不透明的方式尝试了一些黑客，并且没有任何工作。

 < div class =product-container > 
< div class =product-image>< img src =http://placehold.it/200x200> 
< div class =overlay> PRICE< / div> 
< / div> 
  

网址 http://jsfiddle.net/MZ3eE/
我知道JS可以使用，但在这种情况下，我需要纯粹的CSS解决方案。

解决方案

在查看新的小提琴后，您需要这样做


$ b

b

  .product-container：hover .overlay-box {
 display：block; 
} 
  

而不是

  .product-img-box：hover + .overlay-box {
 display：block; 
} 
  

http://jsfiddle.net/avxLA/1/

I am facing very annoying problem. I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image. It does work, but when image is hovered, overlay doesnt stop flickering. I tried few "hacks" by setting opacity and nothing works.

<div class="product-container">
        <div class="product-image"><img src="http://placehold.it/200x200">  
        <div class="overlay">PRICE</div>
</div>

URL is http://jsfiddle.net/MZ3eE/ I know JS could be used, but in this case i need pure CSS solution.

解决方案

After looking at the new fiddle

you need to do this

.product-container:hover .overlay-box {
    display: block;
}

instead of

.product-img-box:hover + .overlay-box {
    display: block;
}

http://jsfiddle.net/avxLA/1/

这篇关于悬停时显示DIV闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！