Question

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

string pattern = @"<img.*?src=""(?<url>.*?)"".*?>";
Regex rx = new Regex(pattern);
foreach (Match m in rx.Matches(TexthavingImageURl))
    {
        string urlObtained = m.Groups["url"].Value;

        //Downloading the image with the URl and saving it in a file
        img.Save(filename);


        ImagePart imagePart = mainPart.AddImagePart(ImagePartType.Png);

        using (FileStream stream = new FileStream(filename, FileMode.Open, FileAccess.Read, FileShare.Read))
             {
                imagePart.FeedData(stream);
             }
             imageElement = AddImageToBody(document, mainPart.GetIdOfPart(imagePart));
             consolidatePara.AppendChild(new Paragraph(new Run(imageElement)))
    }

    TableCell cell = new TableCell();
        cell.Append(new TableCellProperties(
            new TableCellWidth() {
                Width = "300",
                Type = TableWidthUnitValues.Pct  })); 

        cell.Append(consolidatePara);
        row.Append(cell);
        table.Append(row);

CSS：

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

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

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

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

Answer 1

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

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

1 个答案: