本文介绍了悬停显示 DIV 闪烁的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我面临着非常烦人的问题.我有 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/
这篇关于悬停显示 DIV 闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！