本文介绍如何使用纯 css 实现图片悬停时平滑放大（zoom）效果，且仅在鼠标移入时触发缩放，无需 javascript，代码简洁、性能优异、兼容性好。
本文介绍如何使用纯 css 实现图片悬停时平滑放大（zoom）效果，且仅在鼠标移入时触发缩放，无需 javascript，代码简洁、性能优异、兼容性好。
要实现“仅在 hover 状态下启用缩放”，关键在于避免依赖图片 src 切换逻辑（如 onmouseover="this.src=..."），因为该方式会干扰 CSS 的状态控制，也增加 JS 负担。更优雅、现代的方案是：统一使用单张高清图作为源，通过 CSS transform: scale() 在 :hover 伪类中控制缩放行为——这既满足“仅 hover 时缩放”的需求，又天然规避了默认图与悬停图缩放不一致的问题。
以下为推荐实现方式：
✅ 推荐写法（纯 CSS，语义清晰，性能友好）
<img src="hover_img1.jpg" alt="产品示意图" class="zoomable">
.zoomable {
display: block;
width: 120px; /* 基准显示宽度 */
height: auto; /* 保持宽高比 */
transition: transform 0.4s ease; /* 缩放过渡动画 */
transform: scale(1); /* 初始无缩放 */
}
.zoomable:hover {
transform: scale(1.3); /* 悬停时放大至 130% */
cursor: zoom-in; /* 提示用户可交互 */
}? 为什么不用两张图切换？
原问题中通过 onmouseover 切换 src 属于行为层干预，导致：
- 缩放逻辑需额外绑定到 JS 事件，难以精准控制时机；
- 两张图尺寸/比例不一致时，缩放易出现跳动或失真；
- 不利于响应式设计与图片懒加载（loading="lazy"）。
? 进阶优化建议
- 防边缘裁切：若缩放后图像超出容器，可添加 overflow: hidden 到父容器，或使用 object-fit: cover 配合固定宽高；
- 支持触屏设备：部分移动端需添加 @media (hover: hover) 或监听 touchstart，但现代浏览器对 :hover 在触摸设备上已有合理降级（首次点击即触发）；
-
提升可访问性：为
添加 alt 属性；若缩放用于强调细节，可配合 aria-label 补充说明（如 aria-label="放大查看细节"）。
⚠️ 注意事项
- 避免对 width/height 同时做 transition，易引发重排（reflow）；应优先使用 transform（仅触发重绘，性能更优）；
- scale() 基于元素中心点缩放，如需左上角锚点缩放，可加 transform-origin: top left；
- 若需兼容 IE10+，transform 无需前缀；IE9 及以下不支持 transform，建议忽略或提供降级样式。
综上，摒弃基于 src 切换的旧范式，转而采用声明式的 CSS :hover + transform 方案，不仅能精准实现“仅悬停时缩放”，还显著提升代码可维护性与页面性能。
