html - 悬停时更改 Angular Material 扩展标题的颜色

Question

我有一个 Angular Material 7 扩展面板。当我将鼠标悬停在其中一个 ma​​t-expansion-panel-header 上时，颜色会发生变化。我怎样才能改变这种颜色？

代码:

<mat-accordion>
    <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              Titel
            </mat-panel-title>
            <mat-panel-description>Hi</mat-panel-description>
          </mat-expansion-panel-header>
          Content
    </mat-expansion-panel>
</mat-accordion>

Answer 1

您可以在标题中添加一个类，并将悬停时的背景颜色设置为 currentColor，例如

<mat-accordion>
    <mat-expansion-panel>
          <mat-expansion-panel-header class="disable_ripple">
            <mat-panel-title>
              Titel
            </mat-panel-title>
            <mat-panel-description>Hi</mat-panel-description>
          </mat-expansion-panel-header>
          Content
    </mat-expansion-panel>
</mat-accordion>

然后在 css 中

.disable_ripple:hover{
background: currentColor !important;
}

Working example