在悬停和聚焦时更改 Mat Expansion 中内容的颜色

Question

我正在编写 css 来更改焦点和悬停时文本和箭头指示器的颜色。然而，指示箭头单独作用。当您将鼠标悬停在整个面板上时，我希望它发生变化。目前箭头指示器仅在您直接悬停在它上面时才会发生变化基本上当整个面板具有焦点或悬停时将标题和指示器更改为我的 css：https://stackblitz.com/edit/angular-imycgv?file=styles.css

.mat-expansion-indicator:hover::after,
.mat-expansion-indicator:focus::after{
  color: yellow;
}

.mat-expansion-panel:hover,
.mat-expansion-panel:focus{
  background-color: red;
}
.mat-expansion-panel-header-description:hover, .mat-expansion-panel-header-title:hover,
.mat-expansion-panel-header-description:focus, .mat-expansion-panel-header-title:focus{
  color: orange;
}
    }

Answer 1

要达到预期的效果，请使用以下选项 mat-expansion-indicator 不是面板的直接子级，所以面板的悬停，改变指示器的颜色

.mat-expansion-panel:hover  .mat-expansion-indicator::after,
.mat-expansion-panel:focus  .mat-expansion-indicator::after{
  color: yellow;
}

codesandbox 供参考 - https://codesandbox.io/s/angular-hh3oz