如何在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>

Answer 1

方法：

您可以直接使用css hover使鼠标悬停在项目上。
Angular将类mat-list-item添加到了您的mat-list-item标记中。
因此，将“ hover”应用于此类，如下所示：

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

Only MatList Demo

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

如果没有帮助，请发表评论。