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

这种情况正在发生，因为一旦它显示为无，你就不再在技术上徘徊在那个元素上了。

尝试使用opacity: 0;代替

Answer 2

我认为，当您设置opacity:0时，它仍然存在，因此您无法在不可见的div下单击任何内容。如果您需要此.filter确实不见了，就您而言，建议您使用：

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

悬停时显示无效css无法正常工作

2 个答案: