css - 悬停时显示 Material 复选框动画

Question

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

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