javascript - 在 mouseenter 上定位单个项目

Question

<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="toggle">
    <label (click)="onDelItem()"><i class="fa fa-remove"></i></label> 
</span></li>

我有一个项目列表，我希望显示删除鼠标输入 li(current li) 项目的图标，默认情况下删除图标将被隐藏。

谢谢

Answer 1

您只能使用 CSS 来完成(如果鼠标在项目上，则删除删除图标)，

<ul class="list-group" *ngFor="let item of items; index as i">
   <li class="list-group-item"
       (mouseenter)="mouseEnter()"
       (mouseleave)="mouseLeave()"
       (click)="onItemClick($event)">{{ item.expire }} 
       <label class="delete-icon" (click)="onDelItem()">
             <i class="fa fa-remove"></i>
       </label> 
   </li>
</ul>

在 CSS 中:

.delete-icon {
   display: none;
}


.list-group-item:hover .delete-icon {
   display: block !important;
}