Angular mat-button:hover 背景颜色有效，如果我使用白色以外的颜色

Question

正在尝试为我的 Angular mat-button

上的 :hover 状态设置自定义背景颜色

这是 html： <button mat-button class="my-mat-button">Click</button>

然后我的css在我的styles.sass

.my-mat-button:hover
  background-color: red !important

这可以将悬停状态更改为红色。

但是当我将 css 更改为

.my-mat-button:hover
  background-color: white !important

这导致悬停状态为灰色。

Answer 1

按钮背景颜色按预期工作，而且您的代码也都是正确的。
我在 stackblitz 重建你的问题。如果您查看 "warn" 按钮，您可以看到背景颜色正在工作。

我认为问题在于按钮的不透明度在悬停时发生变化。我在 angular material 代码中搜索并找到了这个：

// Only basic and stroked buttons (not raised, FABs or icon buttons) have a hover 
style.
// Use the same visual treatment for hover as for focus.
.mat-button:hover,
.mat-stroked-button:hover {
  .mat-button-focus-overlay {
    opacity: 0.04;
  }
}

所以你的按钮开始是白色的，但比某种淡出。您也可以在示例中看到这一点。您可以查找原始样式表 here.

Angular mat-button:hover 背景颜色有效，如果我使用白色以外的颜色

Angular mat-button:hover background color works, if I use a color other than white

sass

hover

angular-material

angular