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

在div上方悬停时闪烁

2 个答案: