问题：悬停时mat-form-field的轮廓背景颜色问题

Question

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

为了使用有颜色的mat-card，我在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: 这里

- Quentin

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

---

将来参考，您可以使用浏览器中的开发者工具找到它：

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

- C.OG

---

我把不透明度改成了1，它可以工作了。至于悬停效果，在我的项目中类名没有出现，即使在:hover中也是个谜。非常感谢您的回答。 - Quentin

如何在HTML类中应用具有CSS格式的内容？抱歉，我不是前端开发人员... - felixwcf

Answer 2

您可以通过以下方式更改鼠标悬停时的颜色。在此处，您可以选择任何颜色。
只需将此CSS添加到您的代码中即可。

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

- Muhammad Bilal

Answer 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
})

演示

- Prashant Pimpale