CODEWITHSUNDEEP
javascripthtmlangularangular6
Tejas Valand
Tejas Valand

Reputation: 33

show item on specific table cell on hover in angular 4

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

this my HTML code to show edit icon on hover on specific table cell but the problem is its working but its show icon in all the particular column of table cell i want show edit icon on hover in specific table cell how this to be done

Upvotes: 0

Views: 1868

Answers (2)

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7242

you need to set one extra key is_hover into your array.set is_hover by default false.and just set below code.

you need to set like first in the component.

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>

Upvotes: 0

Jimmy Hedstr&#246;m
Jimmy Hedstr&#246;m

Reputation: 571

Try with the following css:

li.fa-pencil {
  display: none;
}

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

Upvotes: 2

Related Questions