鼠标悬停时不调用和更改背景颜色的函数

Question

我已经用网格填充了一个容器，现在想要添加功能，当您的鼠标越过单元格时，背景颜色会发生变化。

到目前为止，我有：

let container = document.getElementById("container");
let createGrid = (row, col) => {
for(let i = 0; i < (row * col); i++) {
let cell = document.createElement("div");
cell.className = ("cell");
container.appendChild(cell);
}
}
createGrid(100, 60);
let cells = document.querySelectorAll('container div');
let functionality = () => cells.addEventListener('mouseover', function() {
cells.style.backgroundColor = "red";
}
);
functionality();

Answer 1

您没有正确定位querySelectorAll中的<div>元素。此外，querySelectorAll返回一个NodeList对象，该对象由您查询的所有div 元素组成，因此您必须使用 forEach(( 等方法遍历 NodeList 中的每个元素，然后将样式应用于每个元素。

---

检查并运行以下代码片段以获取上述方法的实际示例：

let container = document.getElementById("container");
let createGrid = (row, col) => {
for(let i = 0; i < (row * col); i++) {
let cell = document.createElement("div");
cell.className = ("cell");
container.appendChild(cell);
}
}
createGrid(100, 60);
let cells = document.querySelectorAll('#container div');
let functionality = () => cells.forEach(e => e.addEventListener('mouseover', (e) => {
e.target.style.backgroundColor = "red";
}
));
functionality();

.cell {padding: 5px;}

<div id="container"></div>

注

---

：注：而不是针对#container中的所有<div>元素，您可以使用类名"cell"定位所有div 元素，因为您已将该类名添加到每个网格元素中，这将防止对其他类型的<div>元素进行不必要的 css 更改，从长远来看，您可能会添加到#container。

Answer 2

如果你不想在悬停时做任何其他事情，你可以像这样应用 CSS：

.cell:hover{
background-color: red;
}

如果你想在JavaScript上做到这一点，你需要遍历单元格并为每个单元格添加侦听器：

for(var i=0;i<cells.length;i++){
cells[i].addEventListener('mouseover', function(event) {
event.target.style.backgroundColor = "red";
});

悬停时的颜色不会保留，如果使用 JavaScript 执行此操作，则红色背景颜色将在离开单元格后保留。