'mouseover' 和 'mouseleave' 的事件监听器

Question

我试图让每个单元格在鼠标悬停在它们上方时改变颜色，并在鼠标离开时 return 将其设置为默认颜色。我只用 HTML 创建了 .container div，而其他 divs 是用 JS 循环创建的，所以我发现很难执行代码。

我很确定我需要使单元格成为函数外的变量，但如果是这样，我不确定该怎么做。有人可以帮忙吗？

``let container = document.getElementById("container");


function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    const cell = document.createElement("div");
    cell.innerText = (c + 1);
    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);

var gridCells = document.querySelectorAll(".grid-item"); 

gridCells.addEventListener('mouseover', () => {
  gridCells.style.backgroundColor = 'black';
});

gridCells.addEventListener('mouseleave', () => {
  gridCells.style.backgroundColor = '';
});``

Answer 1

如果这看起来像是一个愚蠢的建议，请原谅我，但为什么不为此使用 css:hover 属性？

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

https://www.w3schools.com/cssref/sel_hover.asp

Answer 2

如果只能使用 javascript，则可以将事件侦听器放入循环中。或者你可以只使用 css .grid-item:hover {background-color: black;}

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


function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    const cell = document.createElement("div");
    cell.innerText = (c + 1);
    container.appendChild(cell).className = "grid-item";
    cell.addEventListener('mouseover', () => {
      cell.style.backgroundColor = 'black';
    });
    cell.addEventListener('mouseleave', () => {
       cell.style.backgroundColor = 'white';
    });
  }
};

makeRows(16, 16);

'mouseover' 和 'mouseleave' 的事件监听器

Eventlistener for 'mouseover' and 'mouseleave'

javascript

events

mouseevent

mouseover

mouseleave