6

当我将鼠标移到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); }

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

StackBlitz： 这里

在此处输入图像描述

4

3 回答 3

7

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

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

在此处输入图像描述

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

于 2019-12-16T10:58:13.973 回答
2

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

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: rgba($grey, 0.75) !important;
}
于 2021-01-11T12:14:30.413 回答
1

使用更少的代码，我认为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

于 2019-12-16T11:11:08.757 回答