鼠标悬停图片时复制至指定容器并隐藏指定类元素的技术求助

嘿，完全不用担心，我给你准备了完整的可直接使用的代码，每一步都讲得明明白白，就算没编程经验也能轻松搞定～

1. 先搭好HTML结构 #

你需要先把页面里的图片容器和预览容器写好，把下面代码里的图片地址换成你自己的就行：

<!-- 这是你原本存放图片的容器，鼠标悬停时会隐藏 -->
<div class="previewImages">
  <img src="你的图片1路径.jpg" alt="图片1">
  <img src="你的图片2路径.png" alt="图片2">
  <img src="你的图片3路径.gif" alt="图片3">
</div>

<!-- 这是用来显示悬停图片的预览容器，初始是隐藏的 -->
<div class="thumbnailPreview"></div>

2. 加一点基础样式（让效果更美观） #

这段CSS用来控制元素的显示隐藏和基础外观，直接复制就行：

/* 初始状态下，预览容器隐藏 */
.thumbnailPreview {
  display: none;
  border: 1px solid #eee;
  padding: 6px;
  margin-top: 12px;
  background-color: #fff;
}

/* 鼠标悬停图片时，通过给body加类来切换显示状态 */
body.image-hover .previewImages {
  display: none;
}
body.image-hover .thumbnailPreview {
  display: block;
}

3. 核心功能的JavaScript代码 #

这段代码实现了悬停时复制图片、切换显示的逻辑，注释已经写得很清楚了：

// 获取页面上的两个关键容器
const originalImagesContainer = document.querySelector('.previewImages');
const previewContainer = document.querySelector('.thumbnailPreview');

// 给每个图片添加悬停事件
originalImagesContainer.querySelectorAll('img').forEach(img => {
  // 鼠标移到图片上时触发
  img.addEventListener('mouseover', function() {
    // 复制当前悬停的图片
    const copiedImg = this.cloneNode(true);
    // 清空预览容器，避免之前的图片残留
    previewContainer.innerHTML = '';
    // 把复制好的图片放进预览容器
    previewContainer.appendChild(copiedImg);
    // 给body添加类，触发CSS里的显示隐藏切换
    document.body.classList.add('image-hover');
  });

  // 鼠标离开图片时触发
  img.addEventListener('mouseout', function() {
    // 移除body的类，恢复原来的显示状态
    document.body.classList.remove('image-hover');
    // 清空预览容器的内容
    previewContainer.innerHTML = '';
  });
});

使用方法 #

把上面三段代码按顺序放到你的HTML文件里就行：

1. 把HTML结构放到<body>标签里；
2. 把CSS代码放到<style>标签里（放在<head>里或者<body>末尾都可以）；
3. 把JavaScript代码放到<script>标签里，放在<body>的最末尾（确保页面元素都加载完再执行）。

这样当你把鼠标移到图片上时，原图片容器会隐藏，预览容器里会显示你悬停的那张图片；鼠标离开后，一切就恢复原样啦～

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