Angular CSS行悬停文本更改

Question

Angular 新手。我试图让整行在悬停时更改字体颜色。我的背景颜色工作正常，但我似乎只能让一个单元格一次改变颜色，而不是行中的所有单元格。我正在使用材料库和 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

尝试将您的样式更改为：

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

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

---

这里有一个Working Sample StackBlitz 供您参考。