Css 悬停显示DIV闪烁

我面临着一个非常恼人的问题。 我有两个像下面这样的分区，第一个分区是产品图像，第二个分区是覆盖图，当用户悬停在产品图像上时应该显示。 它确实可以工作，但当图像悬停时，叠加并没有停止闪烁。 我通过设置不透明度尝试了一些“破解”，但没有任何效果

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

价格

URL是

---

我知道可以使用JS，但在这种情况下，我需要纯CSS解决方案。

将

：hover

应用于.product image div，而不是

img

，如下所示：

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

---

将

：悬停
应用于.product image div，而不是
img
，如下所示：

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

看了新小提琴之后

你需要这样做

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

而不是

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

看了新小提琴之后

你需要这样做

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

而不是

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

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

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

好的。否则，如果您希望这样（这更有意义，tbh）：

对于初学者来说，这里有一个未关闭的
，所以不太确定您想要它如何。无论如何，如果您想要这样：

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

好的。否则，如果您希望这样（这更有意义，tbh）：

是不是输入错误。产品图像div未关闭，通过查看代码的格式是不是输入错误。产品图像div未关闭，通过查看代码的格式是不是我的错，这是一个输入错误：）我确实这样尝试过，但没有成功，它仍然闪烁：（你能看一看吗，也许我遗漏了什么？你的网站太大了，我无法浏览出来你是对的，我道歉，我从那里重新修改了代码如果这太费时，我道歉：）我发誓我是这样尝试的：谢谢你的帮助！我的错，那是一个打字错误：）我确实这样尝试过，但是它不起作用，它仍然在闪烁：（你能看一看，也许我遗漏了什么吗？你的网站太大了，我无法浏览出来你是对的，我道歉，我从那里重新修改了代码如果这太耗时，我道歉：）我可以发誓我试过这样做：D非常感谢你的帮助！