angular - 如何在 Angular 材质中制作悬挂效果？

Question

我有一个组件mat-list-item。悬停在其上时如何使悬停效果出现。

<mat-list-item style="cursor:pointer" *ngFor="let sprWellplatform of sprWellplatforms" (click)="onSelectSprWellplatform(sprWellplatform)">
  <h4 mat-line>{{sprWellplatform.name}}</h4> 
  <mat-divider></mat-divider>
</mat-list-item>

标签： angularangular-material

Answer 1

方法：

您可以直接使用 csshover让悬停在项目上工作。
类由 Angularmat-list-item添加到您的mat-list-item标签中。
因此，在此类上应用“悬停”，如下所示：

.mat-list-item:hover {
  background: rgba(0,0,0,.54);
  cursor: pointer;
}

仅 MatList 演示

带有正确代码的演示： https ://stackblitz.com/edit/angular-jewgan?file=src%2Fapp%2Fapp.component.html

请评论，如果没有帮助。