多Div过渡效果问题：悬停step 1-4图片切换下方图片淡入淡出

Hey there! 看起来你已经搞定了核心的图片切换逻辑，这已经迈出了一大步！针对这类悬停触发的分步图片切换需求，我整理了几个大概率会遇到的问题以及对应的解决方案，应该能帮你完善功能：

1. 淡入淡出动画生硬甚至不生效 #

如果你的切换只是直接替换图片src或者生硬地显示/隐藏，那肯定会缺乏流畅感。推荐用CSS的opacity结合transition来实现平滑过渡：

先给下方的详情图片容器加上基础样式：

/* 让所有详情图片重叠在一起，避免布局跳动 */
.step-detail-container {
  position: relative;
  height: [你的图片高度];
  width: [你的图片宽度];
}

.step-detail-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* 0.3秒的淡入淡出过渡，可按需调整时长和曲线 */
  transition: opacity 0.3s ease-in-out;
}

/* 激活状态的图片完全显示 */
.step-detail-img.active {
  opacity: 1;
}

然后在JS里切换时，只需要给目标图片添加active类，同时移除其他图片的active类即可，不用直接修改src，这样过渡效果自然就出来了。

2. 光标移出所有step区域后，详情图片没有回到默认状态 #

可以给所有step的父容器绑定mouseleave事件，当光标离开整个step组时，自动切换回默认的step1图片：

const stepGroup = document.querySelector('.steps-wrapper');
const allDetailImgs = document.querySelectorAll('.step-detail-img');

stepGroup.addEventListener('mouseleave', () => {
  // 先移除所有图片的激活状态
  allDetailImgs.forEach(img => img.classList.remove('active'));
  // 再激活默认的step1详情图
  document.querySelector('.step-detail-img.step-1').classList.add('active');
});

3. 快速切换step时，动画卡顿或者出现叠加 #

这种情况可以加个简单的防抖处理，避免短时间内多次触发切换逻辑：

let switchTimer = null;

function handleStepHover(stepNum) {
  // 清除上一次未执行的切换任务
  clearTimeout(switchTimer);
  // 延迟50ms执行切换，避免快速hover的重复触发
  switchTimer = setTimeout(() => {
    allDetailImgs.forEach(img => img.classList.remove('active'));
    document.querySelector(`.step-detail-img.step-${stepNum}`).classList.add('active');
  }, 50);
}

// 给每个step图片绑定hover事件
document.querySelectorAll('.step-img').forEach((img, idx) => {
  img.addEventListener('mouseenter', () => handleStepHover(idx + 1));
});

4. 页面加载完成后没有默认显示的详情图 #

在DOM加载完成后，主动给step1的详情图加上active类：

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.step-detail-img.step-1').classList.add('active');
});

另外，如果你是通过修改src来切换图片，建议提前预加载所有详情图，避免悬停时图片加载延迟导致的体验问题：

// 预加载所有详情图片
const detailImgUrls = [
  'path/to/step1-detail.jpg',
  'path/to/step2-detail.jpg',
  'path/to/step3-detail.jpg',
  'path/to/step4-detail.jpg'
];

detailImgUrls.forEach(url => {
  const preloadImg = new Image();
  preloadImg.src = url;
});

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