代码之家 › 专栏 › 技术社区 › Kerim092

如何将绝对元素悬停在相对元素内?

css

Kerim092 · 技术社区 · 8 年前

我有一个图标“X”,当按钮悬停时,它会显示在按钮的一角。问题是我因为某些原因不能点击它,比如元素根本不存在。这里是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 ,没有帮助。

截图:

2 回复 | 直到 8 年前

Nandita Sharma 8 年前

试试这个html和css

.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;
   }

<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>

Kerim092 8 年前

通过将'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;
}

推荐文章