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

Question

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

Answer 1

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

:: ng-deep .mat-checkbox-inner-container：悬停.mat-checkbox-persistent-ripple {不透明度：.04；背景：红色（$ color：＃000000）；}

:: ng-deep .mat-checkbox-inner-container：hover {不透明度：1；背景：红色（$ color：＃000000）；}