Angular mat-select hover其他选项时如何移除选中项激活背景

要实现mat-select hover时仅高亮当前悬停选项、隐藏原有选中项背景的效果，只需要在全局样式文件中追加如下代码即可：

/* 匹配原生select交互：hover时仅高亮当前悬停选项 */
.mat-select-panel:hover .mat-option.mat-selected:not(:hover) {
  background: transparent !important;
  color: unset !important;
}

/* 自定义hover选项的高亮样式，可根据你的主题调整色值 */
.mat-option:hover:not(.mat-option-disabled) {
  background: rgba(30, 136, 229, 0.12) !important;
}

样式逻辑说明：

• 当鼠标移入mat-select下拉面板范围内时，所有未被hover的选中选项会自动清除默认选中背景，不会和hover项的高亮冲突
• 仅当前鼠标悬停的选项会显示高亮背景，和原生select的交互逻辑完全一致
• 你可以自行调整hover状态的背景色值，匹配你的项目主题风格

内容的提问来源于stack exchange，提问作者uiankosh