列表菜单悬停时实现带淡入淡出效果的图片src切换

单张图片直接替换src属性无法实现真正的交叉淡入（crossfade），需要通过两层叠放的图片+透明度过渡实现，修改步骤如下：

1. 修改CSS样式 #

在原有样式基础上，给图片添加透明度过渡规则，新增激活状态类：

a {
  color:#ffffff;
}
a:hover {
  color: orange;
}
.imgArea {
  height:100vh; 
  display:flex; 
  justify-content:center; 
  align-items:center;
  position: relative;
}
.imgArea img {
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 /* 新增淡入淡出过渡 */
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
}
/* 激活显示的图片 */
.imgArea img.active {
  opacity: 1;
}

.imgArea:before {
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index:0;
}

ul li {
list-style-type: none; font-size: 24px;line-height: 2em;
font-variant: small-caps;font-weight: bold; text-align:center;
}

可以根据需要调整0.5s的过渡时长，或者修改ease-in-out缓动函数适配自己想要的动画节奏

2. 调整HTML结构 #

把原来的单张图片改成两层叠放的图片，去掉行内事件绑定，用data-img属性存储对应图片地址，同时给文字容器提高层级避免被遮罩挡住：

<div class="imgArea">
  <!-- 两层图片用于交叉淡入 -->
  <img src="https://weareaddition.com/wp-content/uploads/2022/05/destinyschild.jpeg" class="slider active">
  <img src="" class="slider">
  <div style="position:absolute;z-index: 1;">
    <ul>
      <li>
        <a href="#" data-img="https://weareaddition.com/wp-content/uploads/2022/05/destinyschild.jpeg">Destiny’s Child</a>
      </li>
      <li>
        <a href="#" data-img="https://weareaddition.com/wp-content/uploads/2022/05/littlemix.jpeg">Little Mix</a>
      </li>
      <li>
        <a href="#" data-img="https://weareaddition.com/wp-content/uploads/2022/05/Pele.jpeg">Pele</a>
      </li>
      <li>
        <a href="#" data-img="https://weareaddition.com/wp-content/uploads/2022/05/chrisbrown.webp">Chris Brown</a>
      </li>
    </ul>
  </div>
</div>

3. 替换原有JS逻辑 #

新逻辑会在悬停时先把目标图片加载到未激活的图片层，等图片加载完成后再切换两层的透明度，避免出现空白闪烁，实现自然的交叉淡入：

// 获取两个叠放的图片层
const sliders = document.querySelectorAll('.slider');
let activeIndex = 0; // 标记当前显示的图片层索引

// 给所有链接绑定悬停事件
document.querySelectorAll('.imgArea a').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const targetImgUrl = link.dataset.img;
    const currentActive = sliders[activeIndex];
    // 当前已经显示目标图片时直接跳过，不重复触发动画
    if (currentActive.src === targetImgUrl) return;

    // 切换到备用图片层
    const nextIndex = activeIndex === 0 ? 1 : 0;
    const nextSlider = sliders[nextIndex];
    nextSlider.src = targetImgUrl;
    // 等图片加载完成再切换透明度，避免加载慢导致空白
    nextSlider.onload = () => {
      nextSlider.classList.add('active');
      currentActive.classList.remove('active');
      activeIndex = nextIndex;
    }
  })
})

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