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

Question

我正在尝试更改背景的颜色，即鼠标悬停时勾勒出的垫子表单字段的颜色。

.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;
}

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

Answer 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