mat-form-field outlined hover effect when invalid

Question

I'm trying to change the color of the background, of a mat-form-field outlined when I have the mouse hover.

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

The code above works well, when the form control is valid But when, its invalid, I tried:

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

And that changes the color permanently. Not only when I have the mouse hover. Help please. Thanks, David

Answer 1

You should use the :hover CSS pseudo class to apply styles if you want them to only appear when the mouse hovers over it. For reference, you can tweak the below CSS classes, but I think they should work

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

As you can see the styles will only apply due to .mat-form-field-flex:hover