以角度悬停时显示或隐藏元素

Question

我有一张带有“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但不知道如何判断用户是否悬停

Answer 1

尝试这个：

<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;