角垃圾图标正在将鼠标指针更改为光标

Question

我有一个带角度的 3 列表。列是域禁用操作，操作是垃圾桶图标按钮。

我的问题是当鼠标指针出现在垃圾桶图标按钮上时，鼠标指针变成了像文本框一样的光标。我怎样才能让它指向图标？

我的工作表代码在这里：

  <mat-table #table [dataSource]="tableData">

    <ng-container cdkColumnDef="domain">
      <mat-header-cell *cdkHeaderCellDef fxFlex="50%">Domain</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="50%">{{config.domain}}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="disable">
      <mat-header-cell *cdkHeaderCellDef fxFlex="30%">Disabled</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.disabled}}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="button">
      <mat-header-cell *cdkHeaderCellDef fxFlex="15%">Action</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="15%">
        <mat-icon (click)="deleteDomain(config)">delete_forever</mat-icon>
      </mat-cell>
    </ng-container>

    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *cdkRowDef="let config; columns: displayedColumns;"></mat-row>

  </mat-table>

Answer 1

您可以使用cursor: pointer CSS类，但我认为在这种情况下您应该使用图标按钮，就像这样：

<button mat-icon-button (click)="doSomeThing()">
      <mat-icon>delete_forever</mat-icon>
</button>

这将为您提供带有灰色背景颜色的指针光标，这意味着更好的用户体验和更少的 css 类。

Answer 2

在 CSS 中，当光标位于给定元素上方时，可以使用 来更改光标cursor: pointer。将该规则应用于您的mat-icon元素，它应该覆盖默认的文本光标。