CSS 鼠标悬停隐藏 div，但是闪烁问题

Question

我只是编写了这个示例HTML和CSS来在鼠标悬停时隐藏一个div。然而，当我将鼠标指针移到上面时，div会闪烁。请问有人能告诉我这里发生了什么，并且如何通过仅使用CSS（不使用JavaScript）来修复它。这是我所拥有的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>

- Vy Le

Answer 1

将此更改为：

.description:hover{
    display:none;
}

转换为：

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

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

可以用于演示和分享HTML、CSS和JavaScript代码的在线编辑器。

- AndrewL64

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>

- om_jaipur