TOP课程Etch-a-Sketch项目：鼠标悬停变色功能仅作用于首个网格项的问题求助

嘿，我完全懂你现在遇到的困扰！咱们来拆解一下问题，然后给你几个实用的解决办法～

问题根源 #

你现在用的document.querySelector('.grid-item')只会返回页面中第一个匹配.grid-item类名的元素，所以你只给第一个网格项绑定了mouseover和mouseout事件，其他网格项自然不会响应啦。

解决方案1：创建网格项时直接绑定事件（最直观） #

在生成每个网格项的循环里，给每一个新创建的cell直接添加事件监听器，这样每个格子“出生”时就带好了事件响应逻辑：

修改你的makeGrid函数：

const container = document.getElementById("container"); // 先把container存成变量，避免重复查找DOM

function makeGrid(rows, cols) {
  container.style.setProperty('--grid-rows', rows)
  container.style.setProperty('--grid-cols', cols)
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    cell.innerText = (c + 1);
    cell.className = "grid-item";
    // 给当前创建的格子绑定事件
    cell.addEventListener('mouseover', overing);
    cell.addEventListener('mouseout', outing);
    container.appendChild(cell);
  };
};

makeGrid(16, 16);

然后把原来单独绑定事件的那两行代码删掉就好啦。

解决方案2：事件委托（更高效，适合动态元素） #

如果以后你可能需要动态增减网格项，用事件委托会更省心——只给父容器container绑定一次事件，利用事件冒泡来处理所有子网格项的交互：

替换你原来的事件绑定代码：

const container = document.getElementById("container");

container.addEventListener('mouseover', function(ev) {
  // 确认触发事件的元素是网格项
  if (ev.target.classList.contains('grid-item')) {
    overing(ev);
  }
});

container.addEventListener('mouseout', function(ev) {
  if (ev.target.classList.contains('grid-item')) {
    outing(ev);
  }
});

这种方法不用给每个格子单独绑事件，性能更好，而且新添加的网格项也能自动响应事件。

解决方案3：纯CSS实现（最简洁） #

其实你提到的CSS:hover选择器是最简单的方法，完全不用写JS事件！直接在你的CSS里加一行：

.grid-item:hover {
  background-color: red;
}

这样鼠标悬停时格子自动变红，离开后恢复默认的白色，代码量最少，效果也完全达标～

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