Html 在悬停状态下显示“无”'；我不能正常工作

我有一个div（1）在另一个div（2）之上，我希望该div（2）隐藏在悬停状态。我使用display:block和on-hover-display:none来实现这一点。 这将无法正常工作。如果您将其悬停，它将闪烁。它隐藏了一秒钟，然后又弹出。 我的代码是：

HTML

---

发生这种情况是因为一旦它显示为“无”，从技术上讲，您就不再停留在该元素上

---

尝试使用

opacity:0不透明度：0时，它仍然存在，因此您不能单击div下不可见的任何内容。如果您需要此.filter真正消失，在您的情况下，我建议您使用：

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

非常感谢你！这让我疯狂了这么久！现在开始工作了！
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;}

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