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

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

1 个答案: