鼠标悬停时如何让同class的所有DOM元素同步变色？

现有代码意图实现悬停指定class的任意方块时，该class的所有元素同步变为对应专属颜色，但当前仅能让触发悬停的单个方块变色。以下是问题分析及修复方案：

原代码片段 #

HTML #

<div class="A0"></div>
<div class="A0"></div>
<div class="A0"></div>
<div class="A1"></div>
<div class="A1"></div>
<div class="A2"></div>
<div class="A2"></div>
<div class="A3"></div>
<div class="A3"></div>

CSS #

body {
  display: flex;
  flex-wrap: wrap;
}

div[class^="A"] {
  position: relative;
  background-color: slategray;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  margin-top: 4px;
  margin-left: 4px;
}

div[class^="A"].B0 {
  background-color: red;
}

div[class^="A"].B1 {
  background-color: blue;
}

div[class^="A"].B2 {
  background-color: green;
}

div[class^="A"].B3 {
  background-color: yellow;
}

JavaScript #

let allDivs = [...document.querySelectorAll(`div`)];
let Classes = [ "A0", "A1", "A2", "A3" ];

console.log(`let 'allDivs' equals:`);
console.log(allDivs);

for (let i = 0; i < Classes.length; i++) {
  let allDivsFiltered = allDivs.filter(item => (item.className.match(`A${i}`)));

  console.log('---- ---- ---- ----');
  console.log(`let 'allDivsFiltered [${i}]' equals:`);
  console.log(allDivsFiltered);

  // allDivsFiltered.classList.add(`B${i}`); // THIS DOESN'T WORK;

  for (let all of allDivsFiltered) {
    all.onmouseover = () => {
      all.classList.add(`B${i}`); // This does work,
      // but seperately on each one;

      // allDivsFiltered.classList.add(`B${i}`); // DOESN'T WORK HERE
        // AS WELL;
    };

    console.log(all);
  };
};

问题原因 #

1. 原事件处理逻辑仅对触发悬停的单个元素（all）添加样式类，没有批量操作同class的所有元素。
2. 尝试直接给allDivsFiltered加类的写法错误——allDivsFiltered是DOM元素数组，并非单个DOM元素，不存在classList属性。

修复后的JavaScript代码 #

let allDivs = [...document.querySelectorAll(`div`)];
let Classes = [ "A0", "A1", "A2", "A3" ];

for (let i = 0; i < Classes.length; i++) {
  let allDivsFiltered = allDivs.filter(item => item.className.match(`A${i}`));

  for (let div of allDivsFiltered) {
    // 鼠标移入：给同class所有元素添加样式类
    div.onmouseover = () => {
      allDivsFiltered.forEach(item => item.classList.add(`B${i}`));
    };
    // 鼠标移出：移除样式类，恢复初始颜色
    div.onmouseout = () => {
      allDivsFiltered.forEach(item => item.classList.remove(`B${i}`));
    };
  };
};

修复说明 #

• 核心修改：在mouseover事件内，通过forEach遍历同class元素数组，实现批量添加样式类，达成同步变色效果。
• 补充了mouseout事件，鼠标移出时移除对应样式类，让元素恢复初始状态，完善交互逻辑。

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