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

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 但它在闪烁

CSS hide div on mouse hover but it is blinking

html

css

hover

代码片段：