如何用JavaScript实现所有项目按钮的mouseover显示图片、mouseout隐藏图片效果

嘿，我瞅了你的代码和问题，一下子就找到症结啦！你现在的代码只对第一个项目生效，核心问题出在ID的唯一性上：你用getElementById("project")只能获取到页面中第一个ID为project的元素，HTML规范里ID必须是唯一的，所以其他项目元素根本没被绑定事件，自然不会触发图片显示效果。

下面给你两种解决方案，按需选就行：

方案一：用JavaScript批量绑定事件（适合需要复杂交互的场景） #

第一步：先修改HTML结构 #

把所有项目的id="project"改成class="project"（类名可以重复使用，正好用来选中所有项目）；如果每个项目对应不同的图片，建议给每个项目元素加个data-img-src属性，比如：

<div class="project" data-img-src="你的图片地址1">项目1</div>
<div class="project" data-img-src="你的图片地址2">项目2</div>
<!-- 其他项目同理 -->

第二步：修改JavaScript代码 #

我们要选中所有项目元素，然后给每个元素单独绑定事件：

document.addEventListener("mousemove", (e) => {
  const cursor = document.querySelector(".cursor");
  cursor.style.left = e.pageX + "px";
  cursor.style.top = e.pageY + "px";
});

// 选中所有项目元素
const projects = document.querySelectorAll(".project");
const img = document.getElementById("images");
const text = document.querySelector(".text");

// 遍历每个项目，绑定hover事件
projects.forEach(project => {
  // 鼠标移入时显示图片
  project.addEventListener("mouseover", function() {
    // 如果每个项目对应不同图片，这里切换图片地址
    if (this.dataset.imgSrc) {
      img.src = this.dataset.imgSrc;
    }
    img.style.display = "block";
    text.style.display = "none";
  });

  // 鼠标移出时隐藏图片
  project.addEventListener("mouseout", function() {
    img.style.display = "none";
    text.style.display = "block";
  });
});

方案二：用CSS伪类实现（更简洁，适合简单交互） #

如果你的需求只是hover时显示/隐藏图片，完全不用写JavaScript，用CSS的:hover伪类就能搞定，代码更简洁：

/* 默认隐藏图片，显示文字 */
#images {
  display: none;
}
.text {
  display: block;
}

/* 鼠标hover项目时，切换显示状态 */
.project:hover #images {
  display: block;
}
.project:hover .text {
  display: none;
}

这种方式不用绑定任何JS事件，浏览器原生支持，性能也更好～

备注：内容来源于stack exchange，提问作者Ismail Shaikh