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

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>

---

  

这是您推荐的Working Demo。

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

I have created an example.

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

Answer 4

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

如果颜色没有悬停，则需要更改颜色。

HTML

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

CSS：

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

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