css - 悬停时问题垫形成场轮廓背景颜色

Question

我将鼠标移到mat-form-field上时遇到CSS问题。

为了能够使用彩色垫纸卡，我在style.scss中添加了一些CSS类来更改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); }

效果很好，但是当我将鼠标悬停在 mat-form-field上时，
背景变成红色的时间不到一秒钟。
不幸的是，我找不到允许删除这种透明度的CSS类。

StackBlitz: here

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:



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