悬停时的角度材质按钮更改

Question

任何人都可以提供一个在悬停时改变颜色的有角度的材料按钮的stackblitz示例吗？

我发现的答案使用 ng::deep ，看起来它会被删除？

    .link-btn /deep/ .mat-button-focus-overlay {
    background-color:transparent;
}

Answer 1

您可以将mouseover和mouseout事件与[color]属性绑定一起使用。 像这样的东西：

<button 
  mat-raised-button 
  [color]="color" 
  (mouseover)="color = 'warn'"
  (mouseout)="color = 'accent'">
  Click me!
</button>

---

这是供您参考的工作演示。

Answer 2

尝试这个：

这是 Stackblitz 链接：

https://stackblitz.com/edit/angular-xf75rm-twuv1h?file=src/app/button-types-example.css

添加一个像hover-class ：

<div class="example-button-row">
  <button mat-raised-button color="primary" class="hover-class">Primary</button>
</div>

在 css 中：

.hover-class:hover {
  background-color: red;
}

Answer 3

我已经创建了一个示例。

您不需要为此使用 ng::deep 或 /deep/ 。

Answer 4

这是另一种更简单的方法：

想法是改变颜色，如果它没有悬停。

HTML

<button mat-button color="primary"> Click me! </button>

CSS：

[mat-button]:not(:hover) {
  color: inherit;
}

您可以根据需要更改选择器并添加:focus或您希望的任何其他伪选择器