css实现鼠标移入时img图标变色

最新推荐文章于 2024-11-21 11:25:59 发布

一只特立独行的猫猫

最新推荐文章于 2024-11-21 11:25:59 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css

原文链接：https://mp.youkuaiyun.com/console/editor/html/105291276

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS实现鼠标悬停时img图标颜色变化的方法，通过组合transform和filter属性，无需额外图片即可完成效果。文章详细解释了实现原理，包括利用div的overflow属性和transform的translateY配合filter的drop-shadow来达到视觉上的颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们需要实现类似鼠标移入img图标变色的功能，虽然提前准备好两张相应颜色的图片就可以解决问题，但是使用css也是可以做到让img图标变色的

首先使用一个div将img包裹起来

<div class=“imgtest”>
    <img src="images/logo.png" alt="">
</div>

然后定义该div的样式

.imagetest{
    width:50px;
    height:50px;
    overflow：hidden;
}

再定义鼠标移入的时候img的样式

.imagetest:hover img{
    transform: translateY(-50px);
    filter: drop-shadow(#66ccff 0 50px);
    //颜色、x轴偏移量、y轴偏移量
}

原理解释

1. div设置overflow：hidden的话就意味着，超出该div的长宽范围的内容就不会显示了
2. hover的时候img先向y轴负方向偏移50px（隐藏了），然后经过滤镜处理颜色的“新”图片再向y轴正方向偏移50px（回来了）