不能用 :hover 直接修改 content 实现图片切换，因 content 仅对伪元素生效且不支持响应式图片；可靠方案是 background-image + :hover 或双 + opacity 切换，并确保 hover 图片预加载。
不能直接用 :hover 修改 content 来“变换图片”，因为 content 只对 ::before 和 ::after 伪元素生效，且仅支持替换文本或单张背景图（通过 url()），无法触发真实 <img alt="如何实现CSS鼠标经过变换图片_利用hover伪类修改content" > 的 src 切换或响应式图片逻辑。
为什么 content: url() 在 :hover 里表现不稳定
虽然语法上允许在 ::before:hover 或 ::after:hover 中写 content: url(2.jpg)，但实际中会遇到：
- 浏览器可能不重绘伪元素（尤其 Chrome 旧版本）
- 图片加载无 loading 状态，hover 时出现空白闪动
- 无法设置
alt、无法被屏幕阅读器识别，可访问性为零 - 不支持
sizes/srcset，响应式图片失效
真正可靠的做法：用 background-image + :hover
适用于容器尺寸固定、图片仅作装饰的场景（比如图标按钮、卡片封面）。核心是把图片当背景，而非内容：
.icon {
width: 48px;
height: 48px;
background-image: url('icon-default.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.icon:hover {
background-image: url('icon-hover.png');
}
- 必须显式设置
width和height，否则伪元素或空容器无法显示背景 - 推荐用
background-size: cover或contain控制缩放，避免拉伸失真 - 如果要兼容 IE11，避免使用
background-image: image-set()
需要语义化图片？用两张 <img alt="如何实现CSS鼠标经过变换图片_利用hover伪类修改content" > + visibility 切换
当图片需被搜索引擎索引、支持右键保存、或有 alt 描述时，必须用真实 <img alt="如何实现CSS鼠标经过变换图片_利用hover伪类修改content" > 标签：
立即学习“前端免费学习笔记（深入）”；
<div class="img-switcher"> <img src="cat.jpg" alt="猫咪坐姿" class="img-default"> <img src="cat-hover.jpg" alt="猫咪站姿" class="img-hover"> </div>
.img-switcher {
position: relative;
display: inline-block;
}
.img-switcher .img-default,
.img-switcher .img-hover {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: opacity 0.2s;
}
.img-switcher .img-hover {
opacity: 0;
}
.img-switcher:hover .img-default {
opacity: 0;
}
.img-switcher:hover .img-hover {
opacity: 1;
}
- 两张图尺寸需一致，否则定位会偏移
- 用
opacity而非visibility: hidden，保证过渡动画生效 - 若图片较大，建议提前用
loading="eager"或预加载关键 hover 图
最易被忽略的是：无论用哪种方式，hover 图片都应在页面初始化时加载完成——否则鼠标划过瞬间白屏或延迟渲染，体验直接掉档。别只盯着 CSS 写法，得看资源加载时机。
