Question

我只是编写这个示例html和css来隐藏鼠标悬停上的div。但是，当我将鼠标悬停在它上面时，div会闪烁。请有人告诉我这里发生了什么，我怎么能用css修复它（请不要java）。这是我所拥有的jsFiddle。

代码段：

        .container{
        border:1px solid gray;
        height:150px;
        width:200px;
        background-image:     url("http://i934.photobucket.com/albums/ad184/giangvy1011/trade_zps7af1d79c.png");
        background-size:100% 100%;
    }

    .description{
        position:relative;
        top:100px;
        height:50px;
        width:200px;
        background:rgba(215,40,40,0.9); 
        color:white
    }
    .description:hover{
        display:none;
    }

<div class='container'>
        <div class='description'>
            This is description
        </div>
    </div>

Answer 1

改变这个：

.description:hover{
    display:none;
}

对此：

.container:hover .description{
    display:none;
}

jsFiddle：https://jsfiddle.net/AndrewL32/dh24urbm/2/

Answer 2

当您将鼠标悬停在.description时，它会被隐藏，在这种情况下，您不会在.description上徘徊，因为它已被隐藏。然后没有.description并且没有鼠标悬停在它上面并再次显示，再次显示.description鼠标悬停工作并且它一次又一次地发生，它看起来像闪烁。

结论是：

你应该悬停在父div上：

.container:hover .description{
   display:none;
}

我找到了另一个解决方案：

.container {
    border:1px solid gray;
    height:150px;
    width:200px;
    background-image: url("http://i934.photobucket.com/albums/ad184/giangvy1011/trade_zps7af1d79c.png");
    background-size:100% 100%;
display:inline-block;
    position:relative;
    
}

.description {
    position:absolute;
    bottom:0px;
    height:50px;
    width:200px;
    background:rgba(215,40,40,0.9); 
    color:white;
    display:inline-block;
    z-index:1;
}
.description-hover {
    position:absolute;
    bottom:0px;
    height:50px;
    width:200px;
    background:none; 
    display:inline-block;
    z-index:2;
}
.description-hover:hover + div {
    display:none;
}

<div class='container'>
    <div class='description-hover'></div>
    <div class='description'>
        This is description
    </div>
</div>

CSS在鼠标悬停时隐藏div，但它正在闪烁

代码段：

2 个答案: