我有一个带有“ x”按钮的棱角物料卡。
只是希望将“ x”按钮正常隐藏并在将鼠标悬停在卡上时显示出来。
卡的代码:
<mat-card>
<mat-card-title>hello title</mat-card-title>
<mat-card-content>hello content</mat-card-content>
<mat-card-actions>
<button mat-icon-button><mat-icon>close</mat-icon></button>
</mat-card-actions>
</mat-card>
想使用ngClass
但不知道如何判断用户是否在悬停
试试这个:
<mat-card (mouseover)="showButton = true" (mouseleave)="showButton = false" >
<mat-card-title>hello title</mat-card-title>
<mat-card-content>hello content</mat-card-content>
<mat-card-actions>
<button mat-icon-button *ngIf = "showButton"><mat-icon>close</mat-icon></button>
</mat-card-actions>
</mat-card>
showButton
在组件.ts
文件中声明变量,如下所示:
showButton: boolean = false;