使用css filter属性配合:hover伪类可实现图片悬停变黑白效果，无需javascript；默认设filter: none或不设置，悬停时用filter: grayscale(100%)并添加transition平滑过渡。
用 CSS 的 filter 属性配合 :hover 伪类，就能轻松实现图片悬停变黑白的效果，无需 JavaScript。
基础写法：单张图片直接加样式
给 <img> 标签设置初始滤镜为彩色（默认），悬停时应用灰度滤镜：
- 默认状态不加 filter 或设为
filter: none; - 悬停时用
filter: grayscale(100%);完全去色 - 加上
transition让变化更平滑（推荐 0.3s 左右）
示例代码：
批量控制：统一作用于某类图片
如果页面中有多个需要该效果的图片，建议用 class 统一管理：
- 给所有目标图片添加相同 class，比如
class="grayscale-hover" - 在 CSS 中定义该 class 的 hover 行为
- 可同时叠加其他效果，如轻微缩放或阴影增强视觉反馈
示例：
兼容性与细节优化
主流浏览器都支持 filter，但旧版 Safari 需要加前缀：
- 写成
-webkit-filter: grayscale(100%);可覆盖 Safari 6–9 - 现代项目中通常只需标准写法，除非需支持 IE（IE 不支持 filter）
- 注意：filter 会影响整个元素（含子内容），若图片是背景图，应改用
background-filter（目前仅实验性支持，不推荐）
进阶：黑白过渡 + 颜色渐显
想让悬停时黑白褪去、原色浮现？反过来写即可：
- 默认设为
grayscale(100%) - hover 时设为
grayscale(0%) - 配合
brightness或contrast微调观感，避免发灰
例如：filter: grayscale(100%) contrast(0.9); → filter: grayscale(0%) contrast(1.1);
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
