悬停显示 DIV 闪烁

2022-01-22 00:00:00 hover css flicker

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

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>

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

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

推荐答案

看完新小提琴

你需要这样做

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

而不是

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

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

相关文章