CSS改变图标颜色（filter一行代码解决hover变换颜色问题）

解决方案

如果这个图标是独立的，直接在图标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%)