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

问题描述

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

为了能够使用彩色的席卡，我在 style.scss 中添加了一些CSS类，以更改 mat-表单字段.

  .mat-form-field-appearance-outline .mat-form-field-outline-start {背景颜色:白色！重要；}.mat-form-field-outline-outline .mat-form-field-outline-gap {背景颜色:白色！重要；}.mat-form-field-outline-outline .mat-form-field-outline-end {背景颜色:白色！很重要；}mat-form-field mat-label {background-color: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；过渡:不透明度.6s立方贝塞尔曲线(.25，.8，.25,1);} 

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

---

为将来提供参考，您可以使用浏览器中的开发检查器找到这些内容:

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

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

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