I have a table with rows where a specific condition triggers a light red background color for each row. On hover, the background changes to light gray for all rows. However, I need the special rows (already colored light red) to have a deeper shade of red on hover, instead of turning gray like the other rows.
Currently, the best I could achieve is having the red rows color only a single column in deep red on hover, while the rest of the row remains gray.
.css (without the issue of single column coloring):
.cheaterRow {
background-color: rgb(255, 130, 130);
}
.mat-row:hover{
background-color:rgb(201, 201, 201);
}
.html:
<table
mat-table
[dataSource]="dataSource"
matSort
matSortActive="score"
matSortDirection="desc"
*ngIf="!loadingData; else loading"
class="row"
>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header
class="sortHeader">
No.
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name | titlecase }}</td>
</ng-container>
<ng-container matColumnDef="level">
<th mat-header-cell *matHeaderCellDef>
<mat-form-field>
<mat-label>Level</mat-label>
<mat-select (selectionChange)="onChangeLevel($event.value)">
<mat-option>None</mat-option>
<mat-option *ngFor="let level of levels" [value]="level.value">
{{ level.value | titlecase }}
</mat-option>
</mat-select>
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element">
{{ element.level | titlecase }}
</td>
</ng-container>
<ng-container matColumnDef="score">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Score</th>
<td mat-cell *matCellDef="let element">{{ element.score }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; let even = even; columns: displayedColumns"
[class.cheaterRow]="isCheater(row.id)"
></tr>
</table>
I want the entire row to be colored differently based on the condition triggered on hover.