实现 hover 换图必须用 css 或 js：css 方案用 div + background-image，需显式设置宽高；js 方案保留 img 标签并预加载 hover 图，否则首次悬停会闪烁。
img 标签本身不支持 hover 切换图片
直接写 <img src="a.jpg" hover="b.jpg"> 是无效的——img 标签没有 hover 属性，浏览器完全忽略。想实现悬停换图，必须借助 CSS 或 JS，而最轻量、兼容性最好的方案是纯 CSS + 两张图片路径控制。
用 CSS 的 :hover + background-image 替代 img src
把图片当背景，用容器承载，再通过 :hover 切换背景图。这样能避开 img 标签的静态限制，也避免 JS 加载延迟或失败导致的空白。
- HTML 只需一个空容器：
<div class="hover-img"></div> - CSS 中用
background-image设置默认图，&:hover覆盖为另一张：`.hover-img { width: 200px; height: 150px; background-image: url('normal.jpg'); background-size: cover; } .hover-img:hover { background-image: url('hover.jpg'); }` - 注意尺寸必须显式设置（
width/height），否则容器塌陷，图片不可见 - 如果需要 alt 文字或 SEO 支持，这个方案不适用——它本质不是
img元素
用 JS 监听 mouseenter/mouseleave 动态改 src
保留 img 标签结构，适合需要语义化、可访问性（如 screen reader 读取 alt）的场景。关键点是预加载悬停图，否则首次 hover 会卡顿或闪白。
- HTML 写法：
<img src="normal.jpg" data-hover="hover.jpg" alt="描述文字"> - JS 中监听事件并切换：
document.querySelectorAll('img[data-hover]').forEach(img => { const hoverSrc = img.dataset.hover; const normalSrc = img.src; img.addEventListener('mouseenter', () => img.src = hoverSrc); img.addEventListener('mouseleave', () => img.src = normalSrc); }); - 务必预加载 hover 图：
const preload = new Image(); preload.src = hoverSrc;，否则第一次悬停时可能空白几帧 - 不要用
onmouseover内联写法，容易污染 HTML 且难维护
用 picture + media query 做响应式 hover？不行
<picture></picture> 用于根据屏幕尺寸/设备特性切换源，不是交互触发。CSS :hover 无法嵌套进 <source></source>，也不能动态改 <picture></picture> 内部结构。强行混用会导致行为不可预测，比如 hover 时只切换了某一个 srcset 分辨率，但没换图主题。
真正需要响应式 + hover 的场景，应该在 CSS 方案里分别写不同断点下的 background-image，或者 JS 方案里按 window.matchMedia 动态选图路径——而不是指望 picture 自动适配交互状态。
hover 换图这事，核心就两条：要么放弃 img 标签用 CSS 背景，要么用 JS 控制但必须预加载。漏掉预加载，用户第一次悬停就会看到闪烁或占位符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
