hovering effect is not working on nz-table

Question

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

Answer 1

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