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

Question

我正在编写 CSS 来更改焦点和悬停时文本和箭头指示器的颜色。然而，指示器箭头单独起作用。当您将鼠标悬停在整个面板上时，我希望它发生变化。目前箭头指示器只有当你直接悬停在它上面时才会改 rebase 本上当整个面板有焦点或悬停时将标题和指示器更改为我的 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