Question

我面临着非常烦人的问题。我有2个像下面的div，第一个div是产品图像，第二个是叠加，当用户将鼠标悬停在产品图像上时应该显示。它确实有效，但是当图像悬停时，叠加不会停止闪烁。我试过几个＆＃34; hacks＆＃34;通过设置不透明度，没有任何作用。

<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解决方案。

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;
}

updated fiddle

Answer 3

对于初学者来说，那里有一个未闭合的<div>，所以不太确定你想要它。无论如何你想要这样：

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

然后像其他人一样说：

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

会好起来的。否则，如果你想要它（这更有意义tbh）：

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

你应该把它放在:hover这样的容器上：

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

在悬停显示DIV闪烁

3 个答案: