mat-grid-list 悬停时更改行的背景

Question

Angular nodejs 项目 UI。使用 mat-grid-list 显示数组。想要更改行的背景以在悬停时突出显示它。但只能使用以下代码在瓷砖上执行此操作。 HTML：

<mat-accordion>
  <mat-expansion-panel [expanded]="true" (opened)="true" hideToggle="false">
    ... ...
    <mat-grid-list cols="3" rowHeight="35px">
        <mat-grid-tile class="list-title">Name</mat-grid-tile>
        <mat-grid-tile class="list-title">Time</mat-grid-tile>
        <mat-grid-tile class="list-title">Size</mat-grid-tile>
        <ng-container *ngFor="let item of list">
            <div (click)="onRowClicked(item)">
                <mat-grid-tile class="list-cell"> {{item.name}} </mat-grid-tile>
                <mat-grid-tile class="list-cell"> {{item.time}} </mat-grid-tile>
                <mat-grid-tile class="list-cell"> {{item.size}} </mat-grid-tile>
            </div>
        </ng-container>
    </mat-grid-list>
  </mat-expansion-panel>
</mat-accordion>

CSS：

.list-title {
  border-bottom: 1px solid lightgray;
  border-top: 1px solid lightgray;
}
.list-cell:hover {
  border: 1px;
  background: lightgray;
}

希望将悬停背景更改应用于整行，因此我更改为以下内容：

<ng-container *ngFor="let item of logList">
    <div  class="list-cell" (click)="onRowClicked(item)">
        <mat-grid-tile> {{item.name}} </mat-grid-tile>
        <mat-grid-tile> {{item.time}} </mat-grid-tile>
        <mat-grid-tile> {{item.size}} </mat-grid-tile>
    </div>
</ng-container>

然后悬停时没有反应。 请帮忙。谢谢

Answer 1

我使用您提供的确切标记和样式制作了一个简单的example，并且背景颜色在悬停时会发生变化。其他样式是否会影响.list-cell 元素？