如何在悬停时有条件地将css应用于mat-row元素? [英] How do I conditionally apply css to a mat-row element on hover?

问题描述

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

I have a table with rows and when a certain condition is met (for each row) the background color is light red. For every row, on hover, I change the background to light gray. Problem is, I want the special rows (those that get the light red color already) to be colored with a deeper shade of red on hover (And not gray like all the other rows).

我能获得的最佳结果是，将红色行的颜色悬停在悬停的一列上，并显示深红色，但其余行仍被涂成灰色.

Best result I could get is having the red rows color a single column on hover with deep red but the rest of the row is still painted gray.

.css(没有单列着色错误):

.css (without the single column coloring bug):

.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 (depending on the condition) on hover.

推荐答案

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

You could add a data attribute and apply custom 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样式表中优先考虑的条件

If you have additional conditions and some rows which match multiple then you can simply organise your css so that conditions you want to take priority lower in the .css stylesheet

这篇关于如何在悬停时有条件地将css应用于mat-row元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！