CODEWITHSUNDEEP
htmlcssangulartypescriptangular-material
brewphone
brewphone

Reputation: 1366

mat-grid-list change background of row when hover

Angular nodejs project UI. Using mat-grid-list to display an array. Want to change row's background to highlight it when hover. But can only do it on tile with following code. 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;
}

Hoping to apply the hover background change to the whole row so I changed to following:

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

then there is NO reaction when hover. Please help. Thanks

Upvotes: 0

Views: 3540

Answers (1)

Nathaniel Buck
Nathaniel Buck

Reputation: 26

I made a simple example using the exact markup and styling you provided, and the background color is changing on hover. Are other styles affecting the .list-cell elements?

Upvotes: 1

Related Questions