Javascript 向未工作的子div添加悬停效果

我想为我的

parentDiv

中的所有子项添加鼠标悬停效果。但是现在，如果我将鼠标悬停在其中一个方块上，无论我将鼠标放在哪个小孩身上，最后一个

childdiv

实际上都会改变它的背景。为什么呢

for (let i = 0; i < Number(height); i++)
    {
        for (let j = 0; j < Number(width); j++)
        {                               
            var childDiv = document.createElement("div");
            childDiv.className = "childDiv";
            childDiv.style.backgroundColor = "#e6e6e6";
            childDiv.id = `${i};${j}`
            childDiv.onclick = () => childDiv.style.backgroundColor = "black";
            childDiv.onmouseenter = () => childDiv.style.background = "#cccccc";                
            childDiv.onmouseleave = () => childDiv.style.background = "#e6e6e6";
            parentDiv.appendChild(childDiv); 
        }           
    }

for（设i=0；ichildDiv.style.backgroundColor=“黑色”；
childDiv.onmouseinter=（）=>childDiv.style.background=“#cccc”；
childDiv.onmouseleave=（）=>childDiv.style.background=“#e6”；
parentDiv.appendChild（childDiv）；
}           
}

将变量更改为：

let childDiv = document.createElement("div");

工作示例。下面是关于（简而言之，

var childDiv

在第一次迭代时创建一次（在循环外部可见）和在最后一次迭代时将其值设置为最后一项之间的差异的更多信息-每个箭头函数（）=>{}使用该

childDiv

及其循环执行后的最后一个值；

让childDiv

在每次迭代中“单独”创建（循环外部不可见），并传递给箭头函数）