有角材料。鼠标悬停时突出显示表格行

Question

我们的应用程序使用 Angular Material 表：

https://material.angular.io/components/table/overview

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

您能否展示如何在鼠标悬停时突出显示一行？

Answer 1

更新：Angular 的最新版本更改了原始答案中使用的类名称，但解决方案保持不变 - 将

:hover

选择器应用于表行类，并将

background-color

设置为选择的颜色：

.mat-mdc-row:hover {
  background-color: red;
}

原答案：

---

使用

:hover

选择器向

mat-row

元素添加一些 CSS：

.mat-row:hover {
  background-color: red;
}

StackBlitz 演示

Answer 2

您可以在主题文件中对组件进行此样式设置：

 @mixin newName-theme($dark-theme)

    mat-table tbody tr:hover{
    cursor: pointer;
    background: #b4b4b433;
  }

 @include newName-theme($dark-theme);

您可以在这里找到更多示例

Answer 3

在我的例子中 .mat-row:hover 不起作用，它突出显示了整个表格。这对我有用：

  tr.mat-row:hover {
      background-color: yellow;
  }

Answer 4

Angular 15 稍微改变了这一点。我现在用的是：

  tr.mat-mdc-row:hover {
      background-color: yellow;
  }

Answer 5

Angular Material 目前具有该功能 here 但如果您想要更多风格化，here 是我的解决方案

Answer 6

如果您使用 Angular 材质 > 15 以及组件的 .css 样式文件，这可能会有所帮助

.mat-mdc-table .mdc-data-table__row:hover{
 background-color: rgba(236, 236, 236, 0.514) !important;
 }

Answer 7

这对我有用。我将 Bootstrap 4 类

.table-hover

应用于 Angular 材质表。

<table class="table-hover" mat-table>...</table>

Answer 8

对我来说，这些都没有在 Angular 15 中工作，必须为

<table>

设置背景颜色，然后将其更改为

<mat-row>

和

<mat-header-row>

（似乎它已经具有悬停功能，但背景颜色相同）：

.table {
  background-color: whitesmoke;
}

.header-row {
  background-color: white;
}

.element-row {
  background-color: white;
}

并将这些类分配给提到的元素

Answer 9

感谢B.Habibzadeh在这里发帖

对我来说这已经足够了

.mat-mdc-row:hover {
  background-color: red !important
}

当您对所有行使用自己的类时，即使这对我也有用：

.myRowClass:hover {
  font-weight: bold;
  background-color: red !important
}

希望这能帮助那些在新 Angular 版本中遇到问题的人。