html - 悬停时不显示任何内容不能正常工作 css

Question

我在另一个 div(2) 之上有一个 div(1)，我希望 div(2) 在悬停时隐藏。我用显示来做到这一点：块和悬停显示：无。这将无法正常工作，如果您将其悬停，它会闪烁。一秒钟它隐藏，然后再次弹出。我的代码是：

HTML

<hgroup>
    <article>
        <div class="filter" >

        </div>
    </article>
<hgroup>

CSS；

hgroup {
      position: relative;
      height: 100%;
      overflow: scroll;}

article {   
      background-image:url('../ad-travelfoto.png');
      width: 1000px;
      height: 578px;
      margin: 0 auto;
      margin-top: 100px;
      box-shadow: 1px 0px 7px black;
      background-size: cover;}

article:last-child{
      margin-bottom: 100px;}

.filter {
     background-color: rgba(0,0,0,0.8);
     height: 578px;
     width: 1000px;}

.filter:hover {
     display: none;}

Answer 1

发生这种情况是因为一旦它显示为无，从技术上讲，您不再将鼠标悬停在该元素上。

尝试opacity: 0;改用

Answer 2

在我看来，当您设置时opacity:0它仍然存在，因此您无法单击不可见的 div 下的任何内容。如果你需要这个 .filter 真的消失了，在你的情况下，我建议你使用：

.filter:hover {
 display: none;
}
article:hover .filter {
 display:none
}