关于html：mat-grid-list悬停时更改行的背景


mat-grid-list change background of row when hover

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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">
           
                <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>
           
        </ng-container>
    </mat-grid-list>
  </mat-expansion-panel>
</mat-accordion>

CSS：

1
2
3
4
5
6
7
8
.list-title {
  border-bottom: 1px solid lightgray;
  border-top: 1px solid lightgray;
}
.list-cell:hover {
  border: 1px;
  background: lightgray;
}

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

1
2
3
4
5
6
7
<ng-container *ngFor="let item of logList">
   
        <mat-grid-tile> {{item.name}} </mat-grid-tile>
        <mat-grid-tile> {{item.time}} </mat-grid-tile>
        <mat-grid-tile> {{item.size}} </mat-grid-tile>
   
</ng-container>

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

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

相关讨论