onmouseout事件异常：鼠标移出后图片无法恢复原尺寸求助

常见问题原因及对应解决方法： #

1. 未保存图片原始尺寸

悬停时直接修改图片宽高，但移出时没有基准值可以恢复。解决思路是提前存储原始尺寸：

// 页面加载时保存目标图片的原始尺寸
document.addEventListener('DOMContentLoaded', () => {
  const targetImgs = document.querySelectorAll('.hover-scale-img'); // 替换成你图片的选择器
  targetImgs.forEach(img => {
    img.dataset.orgWidth = img.offsetWidth;
    img.dataset.orgHeight = img.offsetHeight;
  });
});

// 绑定悬停/移出事件
document.querySelectorAll('.hover-scale-img').forEach(img => {
  img.addEventListener('mouseover', function() {
    this.style.width = '80%'; // 按需求设置缩小比例
    this.style.height = 'auto'; // 保持宽高比
  });

  img.addEventListener('mouseout', function() {
    // 读取存储的原始尺寸恢复
    this.style.width = `${this.dataset.orgWidth}px`;
    this.style.height = `${this.dataset.orgHeight}px`;
  });
});

2. 事件绑定不匹配

如果用了mouseenter事件实现悬停，必须对应mouseleave事件处理移出；用mouseover则对应mouseout，两对事件不要混用，否则可能导致移出事件不触发。

3. CSS样式冲突

• 确保图片初始有明确的宽高设置，避免依赖默认的自适应尺寸：

.hover-scale-img {
  width: 300px; /* 初始宽度，根据实际需求调整 */
  height: auto;
  transition: all 0.3s ease; /* 可选，添加平滑过渡 */
}

• 检查是否有!important标记固定图片宽高，这会覆盖JS设置的样式，需要移除或调整优先级。

4. 其他功能的样式干扰

因为同文件内图片切换功能正常，排查下切换逻辑是否修改了目标图片的style属性或类名，导致移出时恢复的样式被覆盖。可以通过浏览器控制台的Elements面板，查看鼠标移出后图片的宽高样式是否正确应用。

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