Question

我有一个3角的桌子。列是 domain-disable-actions （域禁用操作），而 actions 是垃圾箱图标按钮。

我的问题是，当鼠标指针移到垃圾桶图标按钮上时，鼠标指针变成了像文本框一样的光标。我如何使它成为图标上的指针？

我的工作表代码在这里：

  <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

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

Answer 2

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

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

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

角度垃圾桶图标将鼠标指针更改为光标

2 个答案: