Question

我有一个图标＆＃39; X＆＃39;按钮悬停时显示在按钮的一角。问题是由于某些原因我无法点击它，就像元素甚至不存在一样。这是html：

<button *ngIf="favapps.indexOf('qualitydocs') >= 0" (mouseover)="showQualitydocs = true" (mouseleave)="showQualitydocs = false" class="btn btn-sq btn-primary text-center"
     [routerLink]="['/dokumenti-kvalitete']">
     <i class="fa fa-file-text-o inside fa-2x" aria-hidden="true"></i>
     <br>Dokumenti
     <br> kvalitete
     <span class="relative-qualitydocs"><span class="absolute-qualitydocs" *ngIf="showQualitydocs" (mouseover)="showQualitydocs = true" (mouseleave)="showQualitydocs = false"><i class="fa fa-close"></i></span></span>
</button>

和css：

         .absolute-qualitydocs {
            z-index: 100;
            position: absolute;
            top: 22px;
            background: #fff;
            border: 1px solid #67809F;
            padding: 0 3px;
            cursor: pointer;
            color: #67809F;
            &:hover {
                background-color: #d1d1d1;
            }
        }
        .relative-qualitydocs {
            position: relative;
            cursor: pointer;
            left: -67px;
            top: -67px
        }

正如你在图片上看到的那样，它显示正确，但我无法点击它，我无法将其悬停，即使cursor: pointer也无法正常工作。什么想法可能是错的？尝试放z-index和display: block，没有帮助。

截图：

Answer 1

试试这个HTML和CSS

＆＃13;

.delete-hover {
        z-index: 100;
        background: #fff;
        border: 1px solid #67809F;
        padding: 0 3px;
        cursor: pointer;
        color: #67809F;
    }
    .delete-hover:hover {
           background-color: #d1d1d1;
     }
    .relative-qualitydocs {
        position: relative;
        cursor: pointer;
    }

   .absolute-qualitydocs {
       position: absolute;
       top: 0;
       left: -18px;
   }

＆＃13;

<button class="btn btn-sq btn-primary text-center relative-qualitydocs">
 <i class="fa fa-file-text-o inside fa-2x" aria-hidden="true"></i>
 <br>Dokumenti
 <br> kvalitete
 <span class="delete-hover absolute-qualitydocs" *ngIf="showQualitydocs" (mouseover)="showQualitydocs = true" (mouseleave)="showQualitydocs = false">&times;</span>
</button>

＆＃13;

Answer 2

通过将'span'（'div'也可以）作为父元素而不是'button'来修复它...如果有人知道为什么会发生这种情况，请分享原因我没有线索...这里是working pen

<button class="parent-relative">  <!-- doesnt work -->
  <span class="child-absolute"></span>
</button>

<span class="parent-relative"> <!-- works -->
  <span class="child-absolute"></span>
</span>

的CSS：

.parent-relative {
  position:relative;
  padding: 200px;
  background: red;
  margin:50px;
}

.child-absolute {
  position:absolute;
  padding:20px;
  background:yellow;
  cursor:pointer;
  top: 0;
  left:-40px;
}

如何将绝对元素悬停在相对元素中？

2 个答案: