将鼠标悬停在 div 上闪烁

Question

我正在尝试在将鼠标悬停在 div 上时使用具有一定不透明度的背景颜色。但是一旦我将鼠标悬停在它上面，我就会在颜色上得到闪烁效果。而我悬停的元素工作正常。 我的代码和css如下：

    <div class="flip-menu">
            <section class="flip-item-wrap">
                <img class="fake-image" src="http://lorempixel.com/500/500/food/11" alt=""><!-- this image will add height to parent element -->
                <input type="checkbox" class="flipper" id="a">
                <label for="a" class="flip-item">
                    <figure class="front"><img class="img_hover" src="http://lorempixel.com/500/500/food/1" alt=""></img>

                    </figure>
                    <figure class="back">
                        <img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
                        <div class="flip-item-desc">
                            <h4 class="flip-item-title">Lorem ipsum dolor</h4>
                            <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
                        </div>
                    </figure>
                </label>
                  <div  style="background: none repeat scroll 0 0 #FFFFFF;
                                color: #000000;
                                left: 1px;
                                opacity: 0.8;
                                padding: 4px;
                                 position: absolute;
                                text-transform: uppercase;
                                top: 162px;
                                width: 182px;
                                z-index: 9999;
                                left: 0px;
                                overflow:hidden;" class="hover_div"> 
                     hhh
                  </div>
            </section>
</div>

        .img_hover:hover{
     border:1px solid #888888!important;
    }
     .hover_div{
    display:none;

    }

     .flip-item-wrap :hover + div{
     display: block;
     cursor:pointer;

    } 

Answer 1

我想我明白你想要做什么。这里出现了混淆，因为在测试您的代码时，图像边框上有明显的闪烁，这就是 Yasser 试图修复的问题——他做到了。但我认为你指的是别的东西。我建议从头开始并清理您的代码，这将使事情变得更容易 - 仅此一项可能会解决您的问题。我做了一个小提琴来完成我相信你所追求的。

这应该会让你朝着正确的方向开始。

<style>
    .main {
        width:500px;
        height:500px;
    }
    .cover {
        position:absolute;
        background:#ccc;
        opacity:.5;
        width:500px;
        height:500px;
        display:none;

    }
    .main:hover .cover {
        display:block;
    }
</style>

<div class="main">
    <div class="cover">&nbsp;</div>
    <img class="img_hover" src="http://lorempixel.com/500/500/food/1" alt="">
</div>

JSFiddle

Answer 2

我假设闪烁是边框出现并稍微动摇布局。添加这行 css 并告诉我这是否适合您。

.img_hover{
     border:1px solid #fff !important;
 }

或者，您应该添加一个 jsfiddle，以便我们可以更好地帮助您。

编辑：

更好的方法是这样做 - 谢谢Ruddy

.img_hover:hover {
    outline:1px solid #888888!important;
}