javascript - 在 Angular 4 中悬停时显示特定表格单元格上的项目

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