JavaScript实现鼠标移出缩略图后恢复DOM初始状态的问题

首先，你的问题根源很明确——只给缩略图绑定了mouseover事件来显示大图，但没有绑定鼠标移出事件来清空<p id="groot">里的内容。下面是两种解决方案，还会帮你优化重复的冗余代码：

方案1：给每个缩略图添加mouseout事件 #

你可以给每个缩略图同时绑定mouseout事件，触发时清空groot元素的内容。另外，我帮你把三个重复的actie函数合并成一个，让代码更简洁：

修改后的HTML（给每个缩略图加data-large属性存储大图路径，避免写多个重复函数）：

<body>
  <p>
    <img src="images/thumb-bones.jpg" alt="bones" data-large="images/image-bones.jpg"/>
    <img src="images/thumb-castle.jpg" alt="castle" data-large="images/image-castle.jpg"/>
    <img src="images/thumb-mentalist.jpg" alt="mentalist" data-large="images/image-mentalist.jpg"/>
  </p>
  <p id="groot"></p>
</body>

修改后的JavaScript：

addEventListener("load", init, false);

function init() {
  // 获取所有缩略图元素
  const thumbs = document.getElementsByTagName("img");
  // 批量给每个缩略图绑定事件
  for(let i = 0; i < thumbs.length; i++) {
    thumbs[i].addEventListener("mouseover", showLargeImage, false);
    thumbs[i].addEventListener("mouseout", hideLargeImage, false);
  }
}

// 通用的显示大图函数
function showLargeImage(event) {
  const groot = document.getElementById("groot");
  // 先清空之前的内容，避免多次悬停叠加大图
  groot.innerHTML = "";
  const img = document.createElement("img");
  img.src = event.target.dataset.large;
  groot.appendChild(img);
}

// 清空大图的函数
function hideLargeImage() {
  const groot = document.getElementById("groot");
  groot.innerHTML = "";
}

这样，当鼠标移出任意缩略图时，groot里的大图就会被清空，回到初始状态。

方案2：使用mouseenter和mouseleave（更推荐） #

mouseenter和mouseleave是更精准的鼠标进出事件，不会像mouseover/mouseout那样因为子元素触发不必要的冒泡。用法和上面类似，只需要把事件名替换即可：

// 在init函数里替换事件绑定
thumbs[i].addEventListener("mouseenter", showLargeImage, false);
thumbs[i].addEventListener("mouseleave", hideLargeImage, false);

给你的Stack Overflow新手提问建议 #

作为第一次提问的新手，你已经做得很棒了——附上了完整代码和具体问题描述！再给你几个小技巧，让你的提问更容易得到优质回答：

• 保持代码的最小可运行性：如果代码里有和问题无关的部分，可以删掉，只保留能复现问题的核心代码，减少回答者的阅读成本。
• 补充尝试过的方法：之后提问时，可以加上“我试过XX方法，但没解决问题”，这样回答者能更快定位方向，避免重复给你已经试过的方案。
• 说明环境信息：比如你使用的浏览器版本、是否用到了框架（这次是原生JS就不用），这些细节有时候能帮回答者快速找到问题。
• 保持友好语气：开头可以说“Hi everyone, I'm new here and I'm stuck with this issue...”，结尾加一句“Thanks in advance for any help!”，社区氛围会很友好~

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