показать элемент в определенной ячейке таблицы при наведении на угол 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

вам нужно установить один дополнительный ключ is_hover в вашем массиве .set 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>

Answer 2

Попробуйте с помощью следующего CSS:

li.fa-pencil {
  display: none;
}

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