on mouse hover show icons

on mouse hover show icons

 

 <ng-container matColumnDef="AFINumber">

                <th mat-header-cell *matHeaderCellDef mat-sort-header>

                  AFI Number

                </th>

                <td mat-cell *matCellDef="let element" class="afi-number-cell d-flex align-items-center">

                  <div class="d-flex align-items-center">

                    <span

                      class="afi-number-hover-group"

                      style="display: inline-flex; align-items: center;"

                      (mouseenter)="element.showCancel = true"

                      (mouseleave)="element.showCancel = false"

                    >

                      <a

                        href="javascript:void(0)"

                        (click)="ViewAFIDetails(element.AFINumber)"

                        matTooltip="View AFI details (read-only)"

                        matTooltipPosition="above"

                        class="ms-2"

                        style="position: relative;"

                      >

                        {{ element.AFINumber }}

                      </a>

                      <button

                        *ngIf="element.IsEditable && element.AFIprogressState != 4 && element.AFIprogressState !=2 && element.AFIprogressState != 3"

                        matTooltipClass="red-tooltip"

                        [matTooltip]="'Cancel'"

                        mat-icon-button

                        style="color: #bd2130; font-size: 0.85rem; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; margin-left: 4px;"

                        (click)="CancelAFI(element)"

                        [disabled]="!element.IsEditable"

                        class="action-icons"

                        [ngClass]="{'visible': element.showCancel}"

                      >

                        <mat-icon style="font-size: 18px;">block</mat-icon>

                      </button>

                      <button

                      *ngIf="

                        element.IsEditable &&

                        element.AFIprogressState != 4 &&

                        element.AFIprogressState != 2

                      "

                      matTooltipClass="red-tooltip"

                      [matTooltip]="'Edit'"

                      mat-icon-button

                      style="color: #ffc107; font-size: 0.85rem; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; margin-left: 4px;"

                      (click)="EditAFIDetails(element.AFINumber)"

                      [disabled]="!element.IsEditable"

                      class="action-icons"

                      [ngClass]="{'visible': element.showCancel}"

                    >

                      <mat-icon>edit</mat-icon>

                    </button>

                    </span>

                   

                  </div>

                </td>

              </ng-container>

              <style>

                .action-icons {

                  opacity: 0;

                  transition: opacity 0.2s;

                  pointer-events: none;

                }

                .action-hover-group.show-actions .action-icons,

                .action-icons.visible {

                  opacity: 1 !important;

                  pointer-events: auto;

                }

              </style>