嘿，我来帮你搞定Angular Material表格的行悬停高亮效果，其实有两种常用的方式，看你需求选就行：

方法一：纯CSS实现（最简单推荐） #

Angular Material的表格行默认带有mat-row类，我们直接利用CSS的:hover伪类就能轻松实现高亮，完全不用改模板代码。

在你的组件CSS文件里添加这段样式：

/* 自定义悬停时的背景色，这里用Material Design常用的浅灰，你可以换成任意颜色 */
.mat-row:hover {
  background-color: rgba(0, 0, 0, 0.04);
  cursor: pointer; /* 可选，把鼠标变成手型，提升交互体验 */
}

这样只要鼠标悬停在任意表格行上，就会自动触发高亮效果，简单又高效。

方法二：结合Angular类绑定（灵活控制） #

如果需要更灵活的控制（比如某些行禁止高亮，或者根据行数据动态调整高亮状态），可以用Angular的类绑定配合鼠标事件来实现。

步骤1：修改模板代码 #

给mat-row添加鼠标进入/离开的事件，同时绑定自定义类：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  [ngClass]="{'row-highlight': row.isHovering}"
  (mouseenter)="row.isHovering = true"
  (mouseleave)="row.isHovering = false"
></mat-row>

步骤2：准备数据源（可选） #

如果你的数据源原本没有isHovering属性，需要先给每个数据项添加这个属性：

// 假设你的数据源是dataSource数组
this.dataSource = this.dataSource.map(item => ({
  ...item,
  isHovering: false // 初始化hover状态为false
}));

步骤3：添加CSS样式 #

在组件CSS里定义自定义高亮类的样式：

.row-highlight {
  background-color: #e3f2fd; /* 这里用淡蓝色，你可以自定义颜色 */
}

这种方式的好处是可以根据行数据动态控制是否允许高亮，比如给特定状态的行禁用hover效果。

内容的提问来源于stack exchange，提问作者Vladyslav Plakhuta