本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！
另祝：版权碰瓷诈骗团伙，早日弃暗投明。
相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月
叹！百花齐放的时代,渐行渐远!
需求如下图，hover的时候改变图标颜色，图标为引入的svg img
一般的解决办法有：1.字体图标改变css的color属性；2.js在hover事件中切换图片；3.老一点的方案是hover切换背景？
但是为了更小的开销，一般css为更好的解决方案，svg的颜色是在标签内通过fill属性写死的，所以用到了使用了CSS3滤镜filter中的drop-shadow。
代码如下：
<section>
<div className={styles.image}>
<img src={item.icon} alt="Advantage" />
</div>
<p>{item.line1}</p>
<p>{item.line2}</p>
</section>
广州vi设计公司http://www.maiqicn.com 办公资源网站大全 https://www.wode007.com
section{
.image{
display: inline-block;
overflow: hidden;
}
img{
position: relative;
left: 0;
margin-bottom: .1rem;
filter: drop-shadow(#ffffff 80px 0);
}
&:hover{
background-color: gray;
img{
left: -80px;
}
}
}
drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。其中<offset-x> <offset-y>分别设置阴影的偏移量，且必填。具体可以查看w3c的标准
主要的实现原理就是设置需要的阴影效果，并隐藏，hover时切换显示就好
