如何仅在hover_img1.jpg显示时启用图片悬停缩放功能？

下面提供两种可行的方案，都能实现「仅hover状态的图片启用缩放」的需求：

方案一：纯CSS实现（推荐） #

不用JS切换图片，通过容器包裹两张图，用CSS控制显示状态和缩放逻辑，彻底区分默认图与hover图的行为：

<div class="img-wrapper">
  <img src="default_img1.jpg" alt="默认图片" class="default-img" width="120">
  <img src="hover_img1.jpg" alt="悬停图片" class="hover-img" width="120">
</div>

配套CSS：

.img-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 避免缩放时图片超出容器范围 */
}

.default-img, .hover-img {
  transition: all 0.3s ease; /* 添加平滑过渡动画 */
}

.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 默认隐藏hover图 */
}

/* 鼠标悬停容器时，切换两张图的显示状态并缩放hover图 */
.img-wrapper:hover .default-img {
  opacity: 0;
}
.img-wrapper:hover .hover-img {
  opacity: 1;
  transform: scale(1.2); /* 可自行调整缩放比例 */
}

方案二：保留原有JS切换逻辑，通过类控制缩放 #

在你原有切换图片的JS代码基础上，给图片添加/移除状态类，让CSS只对带类的图片应用缩放：

修改后的HTML：

<img 
  src="default_img1.jpg" 
  onmouseover="this.src='hover_img1.jpg'; this.classList.add('hover-active');" 
  onmouseout="this.src='default_img1.jpg'; this.classList.remove('hover-active');" 
  width="120"
  alt="图片"
>

配套CSS：

img {
  transition: transform 0.3s ease;
}

/* 仅当图片拥有hover-active类时，才触发缩放 */
img.hover-active {
  transform: scale(1.2);
}

注意事项 #

• 可以根据需求调整transform: scale()里的数值，控制缩放幅度
• 添加transition属性是为了让切换和缩放效果更平滑，不需要的话可以删掉
• 记得给图片加上alt属性，提升可访问性

内容的提问来源于stack exchange，提问作者Tommy C