在悬停显示DIV闪烁

Question

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

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

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

Answer 1

看完新的小提琴后

你需要这样做

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

代替

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

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

Answer 2

应用:hover到.product-image div而不是img像这样:

.product-image:hover .overlay {
    display:block;
}

更新小提琴