Angular CSS 行 Hover 文本更改

Question

Angular 的新手。 我正在嘗試在 hover 上更改整行字體顏色。 我的背景顏色工作正常，但我似乎只能讓一個單元格一次改變顏色，而不是一行中的所有單元格。 我正在使用材料庫和 ng-container。

<div>
  <table class="order-summary" mat-table [dataSource]="orderSummary" matSort>
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
      <td mat-cell *matCellDef="let order"><fa-icon [icon]="getTypeIcon(order.type)"></fa-icon></td>
    </ng-container>
    <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: tableColumns"></mat-row>
  </table>
</div>

.mat-row:hover{
  background-color: rgba(119, 119, 122, 0.1);
}

.mat-row:hover{
  color:  #FB792A;
}

Answer 1

嘗試將您的 styles 更改為：

.mat-row:hover{
  background-color: rgba(119, 119, 122, 0.1);
}

.mat-row:hover > .mat-cell {
  color:  #FB792A;
}

---

這是您參考的工作示例 StackBlitz 。