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

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

如果您不想在悬停时做任何其他事情，您可以像这样应用 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离开单元格后红色背景颜色会保留。

Answer 2

您未正确定位 querySelectorAll 中的 <div> 元素。此外，querySelectorAll returns 一个 NodeList 对象，它由您查询的所有 div 元素组成，因此您必须使用类似 [= 的方法遍历 NodeList 中的每个元素21=] 然后将样式应用于每个元素。

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

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>

N.B. 您可以将所有 div 元素定位为 #container 内的所有 <div> 元素class 名称 "cell"，因为您已将 class 名称添加到每个网格元素，这将防止对其他类型的 <div> 元素进行不必要的 css 更改可能会添加到长运行.

中的 #container

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

Function not invoking and changing background color on mouseover

javascript

css

mouseover