1,问题描述: 做项目开发过程的时候,会遇到不少图标/图片在hover的时候展示出活跃色表示能够点击。 切换图源是个方案,实现起来要JS,还增加图片资源,没必要。可以用CSS来实现。 2,思路 使用活跃色的图片素材,给它一个灰色的滤镜。hover的时候取消这个滤镜,还原活跃色。 img { filter: grayscale(100%); opacity: 0.6; } img:hover { filter: none; opacity: 1; } 效果: