如何在悬停时有条件地将CSS应用于行元素？

Question

我有一个带有行的表，当满足特定条件时（每行），背景色为浅红色。 对于悬停时的每一行，我将背景更改为浅灰色。 问题是，我希望特殊行（已经获得浅红色的行）在悬停时用更深的红色着色（而不是像其他所有行一样为灰色）。

我能得到的最好结果是使红色行在悬停时的单个列上显示为深红色，但其余行仍显示为灰色。

.css（没有单列着色错误）：

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

我希望整个行在悬停时具有不同的颜色（取决于条件）。

Answer 1

您可以添加数据属性并应用自定义CSS

<tr
  mat-row
  *matRowDef="let row; let even = even; columns: displayedColumns"
  class="row"
  [attr.data-isCheater]="isCheater(row.id)"
></tr>

的CSS

.row{
  background:gray
}
.row[data-isCheater='true']:hover{
  background: red
}

如果您还有其他条件，并且某些行匹配多个条件，则可以简单地组织CSS，以便您要在.css样式表中优先考虑较低的条件

Answer 2

通过在CSS中编写类，使用自定义条件在表格中显示最后一个tr（我的CSS类是肯定，否定，取消，突出显示）

<tr 
     [ngClass]="{'positive' :(row.status?row.status===1:false) , 
      'negative' :(row.status?row.status===2:false)  ,
      'cancelled':(row.status?row.status===4:false),
      'highlight': selectedRowIndex == row}"

        mat-row *matRowDef="let row; columns: displayedColumns;">
 </tr>