如何为onmouseover切换img标签src的效果添加过渡时间

直接修改img标签的src属性属于DOM属性替换，CSS过渡无法直接对该操作生效，你可以通过以下三种常用方案实现带过渡的图片切换效果：

方案一：使用背景图实现（最推荐，无需写JS） #

把原img标签替换为div，通过背景图切换加过渡实现，代码逻辑最简单：

<!-- 替换原来的img标签 -->
<div class="exhibit-banner-img"></div>

.exhibit-banner-img {
  /* 替换为你实际的图片尺寸 */
  width: 300px;
  height: 200px;
  background-image: url('./Path/to/image.png');
  background-size: cover;
  background-position: center;
  /* 0.3s为过渡时长，可自行调整 */
  transition: background-image 0.3s ease;
}
.exhibit-banner-img:hover {
  background-image: url('./Path/to/newimage.png');
}

方案二：双图叠加切换透明度 #

如果需要保留img标签的语义，可叠放两张图片，通过hover时修改透明度实现过渡：

<div class="img-wrapper">
  <img src="./Path/to/image.png" alt="" class="exhibit-banner-img default-img">
  <img src="./Path/to/newimage.png" alt="" class="exhibit-banner-img hover-img">
</div>

.img-wrapper {
  position: relative;
  /* 替换为实际图片尺寸 */
  width: 300px;
  height: 200px;
}
.exhibit-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
/* 默认隐藏hover状态图 */
.hover-img {
  opacity: 0;
}
/* hover时切换两张图的透明度 */
.img-wrapper:hover .hover-img {
  opacity: 1;
}
.img-wrapper:hover .default-img {
  opacity: 0;
}

方案三：保留原JS修改src逻辑，配合透明度过渡 #

如果你不想修改现有HTML结构，可以保留修改src的逻辑，额外加透明度的过渡动画：

<!-- 给img标签加自定义属性存两张图的地址，去掉原内联事件 -->
<img 
  src="./Path/to/image.png" 
  alt="" 
  class="exhibit-banner-img"
  data-default-src="./Path/to/image.png"
  data-hover-src="./Path/to/newimage.png"
>

.exhibit-banner-img {
  transition: opacity 0.3s ease;
}

const bannerImg = document.querySelector('.exhibit-banner-img');
// 鼠标移入事件
bannerImg.addEventListener('mouseover', () => {
  // 先淡出
  bannerImg.style.opacity = 0;
  // 等过渡完成后替换src，再淡入，延时时间和CSS过渡时长保持一致
  setTimeout(() => {
    bannerImg.src = bannerImg.dataset.hoverSrc;
    bannerImg.style.opacity = 1;
  }, 300);
});
// 鼠标移出事件
bannerImg.addEventListener('mouseout', () => {
  bannerImg.style.opacity = 0;
  setTimeout(() => {
    bannerImg.src = bannerImg.dataset.defaultSrc;
    bannerImg.style.opacity = 1;
  }, 300);
});

注意事项 #

为了避免第一次hover时加载hover图出现空白，建议提前预加载hover状态的图片，可添加以下CSS实现：

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url('./Path/to/newimage.png');
}

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