如何用JavaScript实现鼠标悬停时修改多个同ID标签的文本颜色？

这个问题的核心原因其实是你违反了HTML的基础规范——id属性在页面中必须是唯一的！浏览器的getElementById()方法只会返回第一个匹配到该id的元素，这就是为什么只有"Color"变成了绿色，后面两个标签毫无反应。

下面给你几种可行的解决方案，按推荐程度排序：

方案1：改用class属性（最推荐） #

既然你需要选中多个元素，class才是正确的选择——它本来就是为重复使用设计的。

修改后的HTML： #

<div onmouseover="mouseoverbox1()">
  <a class="a1">Color</a>
  <a class="a1">Names</a>
  <a class="a1">Places</a>
</div>

对应的JavaScript函数： #

你可以用getElementsByClassName()获取所有匹配的元素，然后遍历修改样式：

function mouseoverbox1() {
  const elements = document.getElementsByClassName("a1");
  // 遍历所有元素修改颜色
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.color = "green";
  }
}

或者用更现代的querySelectorAll()，配合forEach遍历（更简洁）：

function mouseoverbox1() {
  document.querySelectorAll(".a1").forEach(element => {
    element.style.color = "green";
  });
}

方案2：不规范但能生效的写法（不推荐） #

如果你非要保留重复的id（强烈不建议，会引发后续样式、脚本的潜在冲突），可以通过属性选择器来获取所有id为a1的元素：

function mouseoverbox1() {
  document.querySelectorAll("[id='a1']").forEach(element => {
    element.style.color = "green";
  });
}

方案3：更简洁的内联写法 #

如果不想单独写函数，也可以直接把逻辑写在onmouseover属性里：

<div onmouseover="document.querySelectorAll('.a1').forEach(el => el.style.color='green')">
  <a class="a1">Color</a>
  <a class="a1">Names</a>
  <a class="a1">Places</a>
</div>

最后再强调一遍：永远不要在页面中使用重复的id，这是HTML的核心规范之一，遵守它能帮你避免很多莫名其妙的bug。

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