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

【问题标题】：Problem mat-form-field outline background-color on hover悬停时出现问题 mat-form-field 轮廓背景颜色
【发布时间】：2020-04-08 19:41:07
【问题描述】：

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

为了能够使用彩色垫卡，我在 style.scss 中添加了一些 CSS 类来更改 mat-form-field 的 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 { 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

【问题讨论】：

标签： css angular angular-material angular-material2 mat-form-field

【解决方案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，从而产生您显示的效果。您可以通过覆盖悬停时的过渡来解决此问题。

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

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

【讨论】：

我将不透明度更改为 1，它可以工作。而对于悬停，该类不会出现在我的项目中，即使在 :hover 中也是如此，这是一个谜。非常感谢您的回答。

【解决方案2】：

你可以通过这个改变悬停的颜色。在这里你可以给任何你想要的颜色。
只需在您的代码中添加这个 css。

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: rgba($grey, 0.75) !important;
}

【讨论】：

【解决方案3】：

代码少一点，我认为ViewEncapsulation.None 很重要：

CSS：

.mat-form-field-flex:hover .mat-form-field-outline {
   opacity: 0;
   transition: none !important;
}

TS：

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'form-field-appearance-example',
  templateUrl: 'form-field-appearance-example.html',
  styleUrls: ['form-field-appearance-example.css'],
  encapsulation: ViewEncapsulation.None
})

Demo

【讨论】：