Question

<td *ngFor="let tbh of tblH; let i=index" on-mouseover="hoveredI=i" on- 
 mouseleave="hoveredI=-1">{{data[tbh]}}
 <div class="onHoverDiv" *ngIf="i==hoveredI">
   <ul>
     <li (click)="editCell(data,tbh);">
       <span class="fa fa-pencil"></span>
     </li>
   </ul>
  </div>
</td>

这是我的HTML代码，用于在特定表单元格上的悬停上显示编辑图标，但问题是它的正常工作，但它要在表单元格的所有特定列中显示图标，我想在特定表单元格上的悬停上显示编辑图标。完成

Answer 1

尝试以下CSS：

li.fa-pencil {
  display: none;
}

li:hover.fa-pencil {
  display: inline-block;
}

Answer 2

您需要在数组中设置一个额外的密钥is_hover。默认情况下，将is_hover设置为false。只需在下面的代码中进行设置即可。

您需要先在组件中进行设置。

tblH.foreach((tbh,i)=>{tblh[i].is_hover = false})

html

<td *ngFor="let tbh of tblH; let i=index"  (mouseleave)="tbh.is_hover =!tbh.is_hover" (mouseenter)="tbh.is_hover =!tbh.is_hover">{{data[tbh]}}
 <div class="onHoverDiv" *ngIf="tbh.is_hover">
   <ul>
     <li (click)="editCell(data,tbh);">
       <span class="fa fa-pencil"></span>
     </li>
   </ul>
  </div>
</td>

在角度4悬停时在特定表格单元格上显示项目

2 个答案: