Warm tip: This article is reproduced from serverfault.com, please click

typescript-以 Angular 显示或隐藏鼠标悬停时的元素

(typescript - Show or hide element on hover in angular)

发布于 2020-11-28 10:52:41

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

Questioner
hamthiii
Viewed
11
17 2020-11-28 20:29:39

试试这个:

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