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

【问题标题】：CSS hide div on mouse hover but it is blinkingCSS在鼠标悬停时隐藏div，但它正在闪烁
【发布时间】：2015-12-25 07:18:05
【问题描述】：

我只是编写了这个示例 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>

【问题讨论】：

标签： html css hover

【解决方案1】：

改变这个：

.description:hover{
    display:none;
}

到这里：

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

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

【讨论】：

【解决方案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>

【讨论】：