悬停时出现问题 mat-form-field 轮廓背景颜色

Question

当我将鼠标移到mat-form-field.

为了能够使用彩色垫卡，我加了一些CSS类style.scss来改变background-color的mat-form-field。

.mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white!important; }
mat-form-field mat-label { background-color: rgba(255, 255, 255, 0.9); }

它工作正常，但是当我将鼠标悬停在 a 上时mat-form-field，背景会在几分之一秒内变成红色。不幸的是，我找不到允许我删除此透明度的 CSS 类。

StackBlitz： 这里

Answer 1

问题是由这个css引起的：

.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.25,.8,.25,1);
}

悬停时，它将不透明度转换为0，从而产生您显示的效果。您可以通过覆盖悬停时的过渡来解决此问题。

为了将来参考，您可以使用浏览器中的开发检查器找到thid：

我调用了元素上的悬停效果并检查了添加的样式