html - 鼠标悬停时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/