Angular Material。如何在鼠标悬停时突出显示表格行

Question

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

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

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

你能展示一下如何在鼠标悬停时突出显示一行吗？

- Vladyslav Plakhuta

Answer 1

更新：Angular的最新版本已更改了原始答案中使用的类名，但解决方案仍然相同-将:hover选择器应用于表格行类，并将background-color设置为所选颜色。

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

原始答案：

---

在mat-row元素上使用:hover选择器添加一些CSS样式：

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

StackBlitz演示

- p4r1

---

这不是改变主题，而是对 Material 主题行为的补充。你能具体说明一下“Material 方式”是如何实现这个的吗？ - p4r1

用户 tr.mat-row:hover。 - Sebastian Castaldi

!important 对我很重要 - Amir Azizkhani

哎呀，为什么其他评论中的人们不喜欢像这样简单的方法呢？我感觉人们很害怕，他们需要在某种框架下保护自己。 - user1663023

@AmirAzizkhani，应该是这样：.mat-mdc-table tr.mat-mdc-row:hover { background-color: red; } - Peter Boomsma

Answer 2

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

 @mixin newName-theme($dark-theme)

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

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

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

- Sandy Veliz

---

这样做更好，因为它允许您轻松地为同一项目中可能使用的不同主题设置不同的悬停颜色。但是我必须使用 tr.mat-row:hover。 - Carl Kroeger Ihl

Answer 3

Angular 15 对此进行了轻微更改。我现在正在使用：

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

- Corey

Answer 4

在我的情况下，.mat-row:hover 没有起作用，它会突出显示整个表格。这对我有效：

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

- Sebastian Castaldi

Answer 5

Angular Material目前已经有这个功能 在这里 , 但如果你想更加美观的话，这里 是我的解决方案

- John Osorio

---

如果您能引用一些文档，那就太好了。大部分只包含链接的答案可能会被删除。 - alt255

实际上，它并没有，您可以看到链接的 stackblitz 应用了自定义样式 tr.example-element-row:not(.example-expanded-row):hover { background: #777; }。这与默认的 Material 样式无关。 - im.pankratov

Answer 6

如果您使用 Angular Material > 15 并且还为组件使用 .css 样式文件，这可能会有帮助。

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

- B.Habibzadeh

Answer 7

这对我有用。我将 Bootstrap 4 类 .table-hover 应用于 Angular Material 表格。

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

- Anudeep

Answer 8

对我来说，在Angular 15中，这两个都不起作用，必须为<table>设置背景颜色，然后再更改<mat-row>和<mat-header-row>的背景颜色（似乎它已经有了悬停效果，但是背景颜色相同）：

.table {
  background-color: whitesmoke;
}

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

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

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

- Paweł Sosnowski

Answer 9

感谢B.Habibzadeh在这里的帖子。

对我来说，这已经足够了。

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

当你为所有行使用自己的类时，即使对我来说也有效：

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

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

- lagugula