悬停时显示材质复选框动画答案

【问题标题】：Showing Material Checkbox Animation On Hover悬停时显示材质复选框动画
【发布时间】：2019-05-06 07:54:39
【问题描述】：

查看link 的效果，其中复选框的圆形背景在悬停时显示。在 Angular 中使用 <mat-checkbox> 时如何获得相同的行为？我希望在悬停时显示背景以及从选中到未选中、未选中到选中等过渡的正常动画。我使用的是@angular/material 6.4.5 版。通过检查版本 7.1.1 的文档，persistent-ripple 类应用于悬停复选框内的<div>。这在 6.4.7 版本的文档中不会发生。旧文档的链接是here。

【问题讨论】：

Angular 材质复选框已经像这样实现了。您检查了official docs 和提供的示例吗？
我想我应该澄清一下我使用的是 @angular/material 6.4.5 版，并查看 6.4.7 版的文档，这似乎不是复选框的默认行为。
你是对的，使用 6.4.7 版本对其进行了测试，这不是默认行为。我建议您更新到最新版本（如果这对您的项目可行），或者像您所做的那样，检查版本之间的差异并尝试自己实现它。
查看文档，这是适用于悬停的类：.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple { opacity: .04; } 你必须使用::ng-deep 来定位.mat-checkbox-inner-container:hover

标签： css checkbox sass angular-material

【解决方案1】：

在css文件中，我添加了以下代码，

::ng-deep .mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple { opacity: .04; background: red($color: #000000);}

::ng-deep .mat-checkbox-inner-container:hover{ opacity: 1; background: red($color: #000000);}

【讨论】：