无效时的mat-form-field轮廓悬停效果答案

【问题标题】：mat-form-field outlined hover effect when invalid无效时的mat-form-field轮廓悬停效果
【发布时间】：2022-01-21 03:47:42
【问题描述】：

我正在尝试更改背景的颜色，即鼠标悬停时勾勒出的 mat-form-field 的颜色。

.mat-form-field.mat-form-field-appearance-outline.mat-form-field-outline-thick {
   // HOVER EFFECT
   background-color: $dark-blue-200;
}

上面的代码运行良好，当表单控件有效时但是当它无效时，我尝试了：

.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid
  .mat-form-field-outline-thick {
  // HOVER EFFECT
  background-color: $error-color-200;
}

这会永久改变颜色。不仅当我有鼠标悬停时。请帮忙。谢谢，大卫

【问题讨论】：

标签： angular sass hover mat-form-field mat-error

【解决方案1】：

如果您希望样式仅在鼠标悬停在其上时出现，您应该使用:hover CSS 伪类来应用样式。作为参考，您可以调整以下 CSS 类，但我认为它们应该可以工作

.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline {
    // When form is valid
    background-color: limegreen !important;
 }

.mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-flex:hover .mat-form-field-outline {
    // When form is invalid
    background-color: red !important;
}

如您所见，样式仅适用于.mat-form-field-flex:hover

【讨论】：