悬停时出现问题 mat-form-field 轮廓背景颜色 [英] Problem mat-form-field outline background-color on hover

问题描述

当我将鼠标移到 mat-form-field 上时，我遇到了 CSS 问题.

为了能够使用彩色垫卡，我在 style.scss 中添加了一些 CSS 类来更改 mat- 的 background-color表单域.

.mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important;}.mat-form-field-appearance-outline .mat-form-field-outline-gap { 背景颜色:白色！重要；}.mat-form-field-appearance-outline .mat-form-field-outline-end { 背景颜色:白色！重要；}mat-form-field mat-label { 背景颜色:rgba(255, 255, 255, 0.9);}

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

StackBlitz:

解决方案

问题是由这个css引起的:

.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {不透明度:0；过渡:不透明度 0.6s 立方贝塞尔曲线 (.25,.8,.25,1);}

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

<小时>

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

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

I have a CSS problem when I pass my mouse over a mat-form-field.

To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the 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); }

It works fine, but when I hover my mouse over a mat-form-field, the background turns red for a fraction of a second. Unfortunately I can't find the CSS class allowing me to remove this transparency.

StackBlitz: here

解决方案

The problem is caused by this 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);
}

On hover it transitions the opacity to 0, causing the effect you show. You could fix this by overriding the transition on the hover.

---

For future reference you can find thid by using the dev inspector in your browser:

I invoked the hover effect on the element and inspected the styles that were added

这篇关于悬停时出现问题 mat-form-field 轮廓背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！