本文介绍如何使用纯 CSS 实现图片悬停切换（默认图 → 高亮图）并仅对切换后的高亮图启用平滑缩放效果，避免默认图被误缩放；无需 JavaScript，语义清晰、性能优异。
本文介绍如何使用纯 css 实现图片悬停切换（默认图 → 高亮图）并**仅对切换后的高亮图启用平滑缩放效果**，避免默认图被误缩放；无需 javascript，语义清晰、性能优异。
要实现“仅在切换为 hover 图时才触发缩放”，关键在于分离状态控制逻辑：不能依赖 onmouseover 动态替换 src（该方式使 DOM 中始终只有一个 <img> 元素，CSS 无法区分“当前显示的是哪张图”），而应通过 CSS 的 :hover 状态 + 背景图切换或伪元素叠加来隐式表达“高亮态”，再统一对其应用缩放。
推荐采用 纯 CSS 背景图方案（更可控、语义更优），而非内联 src 切换：
<!-- 语义化容器：用 div 承载视觉状态 -->
<div class="zoomable-image"
style="background-image: url('default_img1.jpg');">
</div>.zoomable-image {
display: block;
width: 120px;
height: 80px; /* 建议设定固定宽高，确保背景图渲染稳定 */
background-size: cover;
background-position: center;
transition: transform 0.4s ease, background-image 0.3s ease;
}
.zoomable-image:hover {
background-image: url('hover_img1.jpg');
transform: scale(1.35);
/* 缩放中心设为图片中心，避免偏移 */
transform-origin: center;
}✅ 优势说明：
- 精准控制缩放时机：transform: scale() 仅在 :hover 伪类生效时触发，且与 background-image 切换同步，天然满足“只对高亮图缩放”的需求；
- 无 JS 依赖：避免内联事件处理带来的维护性问题和潜在内存泄漏；
- 性能友好：transform 和 opacity 是 CSS 合成属性，硬件加速支持良好；
- 可扩展性强：后续可轻松添加过渡动画、延迟、多图轮播等效果。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若必须保留 <img> 标签结构（如 SEO 或无障碍需求），可改用 ::after 伪元素叠加高亮图，并控制其显隐与缩放：
img { position: relative; } img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('hover_img1.jpg') center/cover; opacity: 0; transition: opacity 0.3s ease, transform 0.4s ease; } img:hover::after { opacity: 1; transform: scale(1.35); } - 避免对 width/height 做过渡（会引发重排），始终优先使用 transform 实现缩放；
- 在移动端需补充 @media (hover: hover) 查询，防止误触——但现代浏览器对 :hover 的触摸设备适配已较完善。
综上，放弃内联 onmouseover 替换 src 的旧范式，转而用 CSS 状态驱动视觉变化，是实现“条件缩放”的简洁、健壮且符合现代 Web 开发实践的方案。
