如何使用JavaScript实现鼠标悬停切换图片？

嘿，根据你给出的图片元素代码，我整理了两种最常用的实现思路，你可以根据自己的实际需求来选：

方案一：悬停缩略图切换主图（电商/图库常用场景） #

如果这几个.mvThumb是缩略图，想要鼠标悬停时切换到对应的主图展示，操作很简单：

第一步：先加个主图容器 #

先在页面上放一个用来展示大图的元素（如果已经有了就忽略这步）：

<!-- 主图容器，默认显示第一张缩略图的内容 -->
<img id="mainDisplayImage" src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" alt="主图展示" style="width:218px; height:147px;">

第二步：写JavaScript交互逻辑 #

给每个缩略图绑定鼠标悬停事件，触发时替换主图的地址：

// 获取所有缩略图和主图元素
const thumbnails = document.querySelectorAll('.mvThumb');
const mainImg = document.getElementById('mainDisplayImage');

// 遍历每个缩略图，绑定悬停事件
thumbnails.forEach(thumb => {
  thumb.addEventListener('mouseover', function() {
    // 把主图的src换成当前悬停缩略图的src
    mainImg.src = this.src;
    
    // 可选：给当前悬停的缩略图加个高亮样式，让用户清楚选中状态
    thumbnails.forEach(t => t.classList.remove('active-thumb'));
    this.classList.add('active-thumb');
  });
});

可选：加CSS优化交互体验 #

给缩略图加个hover和选中的样式，提升用户体验：

.mvThumb {
  cursor: pointer;
  margin: 0 4px;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.mvThumb.active-thumb, .mvThumb:hover {
  opacity: 1;
  border: 2px solid #2c3e50;
  border-radius: 4px;
}

方案二：悬停当前显示图切换下一张（循环轮换） #

如果你的需求是：页面上只显示一张图，鼠标悬停时自动切换到下一张（循环轮播），可以这么做：

第一步：先设置基础样式 #

让所有图片默认隐藏，只显示第一张：

.mvThumb {
  display: none;
  position: absolute; /* 让所有图片叠在同一个位置 */
}
/* 显示第一张图片 */
.mvThumb:first-child {
  display: block;
}

第二步：写切换逻辑 #

给每个图片绑定悬停事件，切换到下一张：

// 把NodeList转成数组，方便操作
const thumbnails = Array.from(document.querySelectorAll('.mvThumb'));
// 记录当前显示的图片索引
let currentShowIndex = 0;

thumbnails.forEach((thumb, index) => {
  thumb.addEventListener('mouseover', function() {
    // 隐藏当前显示的图片
    thumbnails[currentShowIndex].style.display = 'none';
    // 计算下一张的索引，到最后一张后回到开头
    currentShowIndex = (currentShowIndex + 1) % thumbnails.length;
    // 显示下一张图片
    thumbnails[currentShowIndex].style.display = 'block';
  });
});

小提示：如果你的图片地址需要动态配置，还可以给缩略图加data-*自定义属性，比如<img class="mvThumb" data-target-src="xxx.jpg">，然后在事件里用this.dataset.targetSrc来获取地址，这样比直接用src更灵活哦～

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