hover时src切换不生效的主因是路径未加引号导致解析截断，应统一用引号包裹属性值；推荐用mouseenter/mouseleave事件、预存原图地址、image()预加载hover图，并兼顾移动端touch事件兼容。
hover 时 src 切换不生效？检查是否用了内联事件但没加引号
常见写法：<img onmouseover="this.src='a.jpg'" onmouseout="this.src='b.jpg'" src="b.jpg">，看似没问题，但若路径含空格或特殊字符（比如 my image.jpg），浏览器会截断解析，导致 404 或静默失败。必须用引号包裹路径值。
更稳妥的做法是统一用单引号包裹整个属性值，路径用双引号：
@@##@@
或者直接在 JS 中管理，避免 HTML 层混入逻辑。
用 addEventListener 绑定 hover 更灵活，但要注意事件冒泡干扰
直接操作 src 是最轻量的方式，但若页面有多个图片需统一处理，建议用事件委托或批量绑定。注意：不要对父容器绑 mouseover 后再判断 target.tagName === 'IMG'，因为 mouseout 会因子元素（如 <picture></picture>、<source></source>）触发多次，造成闪烁。
推荐为每个 <img onmouseover="this.src='hover.jpg'" onmouseout="this.src='normal.jpg'" src="normal.jpg"> 单独绑定，且预存原图地址：
const img = document.querySelector('#my-img');
const originalSrc = img.src;
const hoverSrc = 'hover.jpg';
<p>img.addEventListener('mouseenter', () => {
img.src = hoverSrc;
});
img.addEventListener('mouseleave', () => {
img.src = originalSrc;
});</p>
- 用
mouseenter/mouseleave而非mouseover/mouseout，避开子元素穿透问题 - 提前缓存
originalSrc，避免 DOM 查询开销，也防止切换过程中被其他脚本覆盖 - 如果图片来自 CMS 或动态渲染，确保
hoverSrc路径与当前页面上下文一致（相对路径易出错，建议用绝对路径或 data 属性存）
图片未预加载导致悬停瞬间空白？用 Image() 提前加载
浏览器默认只加载 src 指向的图片，hover 图在首次触发时才开始请求，网络慢时会明显卡顿甚至显示默认占位符。解决方法是用 Image() 实例主动预加载：
const preload = new Image(); preload.src = 'hover.jpg'; // 触发加载，无需插入 DOM
这个操作可以放在页面初始化阶段，甚至放在 的 script 中。注意：不需要等 onload 再绑定事件，现代浏览器会自动缓存已请求资源；但若要确保可用，可加个简单标记：
const hoverImg = new Image();
hoverImg.src = 'hover.jpg';
hoverImg.onload = () => { /* 可选：标记已就绪 */ };
- 不要在
mouseenter里新建Image()并赋值src——那等于又发起一次请求 - 预加载的图片 URL 必须和后续
img.src赋值的完全一致（含大小写、斜杠、查询参数） - 如果项目用 Webpack/Vite，静态资源路径可能被哈希化，此时应通过构建产物获取真实路径，而非硬编码
移动端 touch 设备没 hover 效果？别依赖 mouseenter
纯 mouseenter/mouseleave 在 iOS Safari 和部分 Android 浏览器中不可靠，尤其当页面有 touchstart 监听器时，hover 事件可能被抑制。真实场景中，用户点一下就该切换，而不是等“悬停”。
兼容方案是监听 touchstart + touchend，并降级到 click（注意防重复触发）：
function handleHover(img, hoverSrc, originalSrc) {
const isTouch = 'ontouchstart' in window;
const enterEvent = isTouch ? 'touchstart' : 'mouseenter';
const leaveEvent = isTouch ? 'touchend' : 'mouseleave';
<p>img.addEventListener(enterEvent, () => img.src = hoverSrc);
img.addEventListener(leaveEvent, () => img.src = originalSrc);
}</p>
更严谨的做法是用 pointerdown/pointerup，但需注意 iOS 13+ 才稳定支持，老版本仍需 fallback。
真正容易被忽略的是：CSS 的 :hover 伪类在多数触摸设备上仅对首个可点击元素生效（且仅在点击后短暂维持），所以纯 CSS 方案（如背景图切换）也不可靠——JS 控制 src 是目前最可控的路径。
