悬停显示 DIV 闪烁答案

【问题标题】：On hover show DIV flicker悬停显示 DIV 闪烁
【发布时间】：2014-07-10 22:53:56
【问题描述】：

我面临着非常烦人的问题。我有 2 个 div，如下所示，第一个 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 解决方案。

【问题讨论】：

看代码的格式，.product-image div未闭合是不是笔误

标签： css hover flicker

【解决方案1】：

看了新的小提琴之后

你需要这样做

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

而不是

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

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

【讨论】：

我的错，那是一个错字 :) 我确实尝试过这样，但它没有成功，它仍然在闪烁 :( 你能看一下，也许我错过了什么？goo.gl/lMO4OS
你的网站很大，我无法浏览
你说得对，我很抱歉，我用那里的代码做了一个新的小提琴jsfiddle.net/avxLA如果这太费时间了，我道歉:)
我可以发誓我是这样尝试的：D 非常感谢您的帮助！

【解决方案2】：

将:hover 应用于 .product-image div 而不是 img，如下所示：

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

updated fiddle

【讨论】：

【解决方案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;}

会很好。否则，如果您想要那样（这更有意义）：

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

【讨论】：