在悬停时显示材质复选框动画 [英] Showing Material Checkbox Animation On Hover

问题描述

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

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.

推荐答案

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

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

这篇关于在悬停时显示材质复选框动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！