html - 悬停时不显示 css 无法正常工作

Question

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

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

之所以会这样，是因为一旦它显示为 none，从技术上讲，您就不会再悬停在该元素上了。

尝试使用 opacity: 0; 代替