解决方案
如果这个图标是独立的，直接在图标class的hover里面放进如下代码即可实现：
filter: brightness(0%) invert(100%);
在这个示例中，使用:hover伪类选择器来选中被鼠标悬停的图标。然后，通过filter属性设置滤镜效果，包括**brightness(0%)**将亮度调整为*0%，invert(100%)*将颜色反转为白色。
hover时，图标的蓝色被覆盖为白色.
如果这个图标是在按钮或者块里面，那么需要用到
.father:hover .child{ filter: brightness(0%) invert(100%); }
如果想使用别的颜色来进行
可以用到filter的drop-shadow来进行偏移,例如
filter:drop-shadow(0px 0px red)
这里就实现了投影是红色的效果。
如果想变成黑色，可以通过以下方法实现。
filter: brightness(0%)
