问题
Check out the effect at this link where the circular background of the checkbox is shown on hover. How can I get this same behavior while using <mat-checkbox> in Angular? I want the background to show on hover as well as the normal animation on transitions from checked to unchecked, unchecked to checked, etc. I am using @angular/material version 6.4.5. By inspecting the documentation for version 7.1.1, a persistent-ripple class is applied to a <div> inside the checkbox on hover. This does not happen in the documentation for version 6.4.7. The link for the older documentation is here.
回答1:
In css file, I have added the following code,
::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);}
来源：https://stackoverflow.com/questions/53620563/showing-material-checkbox-animation-on-hover