hovering effect is not working on nz-table

Issue

In my table I have the class green-row, but the problem is whenever I hovered on a green row it turned into black for a second and then removes the background color and becomes white.

I've tried different options but all of them giving the background color for a second and then gets removed, neither black or green

 <nz-table #filterTable [nzData]="agents$ | async"><thead><tr>
            <ng-container *ngFor="let column of columns"><th *ngIf="column.status" (click)="sortByColumn(column)">{{ column.name }}</th></ng-container>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of filterTable.data"[ngClass]="{'green-row': data.in_targets === true}">
            <td [nzLeft]="fixedColumn" class="center">
              <label nz-checkbox [ngModel]="data.checked" (change)="updateCheckedList(data)">
              </label>
            </td>
            <ng-container *ngFor="let column of columns;let i= index">
              <ng-container *ngIf="column.status">
                <td [class.red]=" data[column.dbName] |negative"
                [ngClass]="{'text-center':column.right,'text-capitalize':column.type==='text'}">
            <td class="text-right" *ngIf="columns[10].status">{{ data.yrchange | currency : 'USD' : 'symbol' : '1.0-0'}}
            </td>
          </tr>
        </tbody>
      </nz-table> 

and the css is

.green-row {
    background-color: lightgreen;
} 

.green-row:hover{
    background-color: black;
} 

but problem is whenever i hovered on green row it turned into black for a seconds then remove bg color and becomes white , tried different options but all of them giving the bg color for a seconds and then remove , neither balck or green

Solution

Hover color is arising from styling on the TD tags, you can just override the styles by using !important, Please find below working example for the same!

.green-row {
  background-color: lightgreen !important;
}
.green-row td {
  background-color: lightgreen !important;
}

.green-row:hover {
  background-color: black !important;
}

.green-row:hover td {
  background-color: black !important;
}

stackblitz working example

Answered By - Naren Murali