javascript - 给子 div 添加悬停效果不起作用

我想为我的 parentDiv 中的所有子项添加一个鼠标悬停效果。但现在如果我把鼠标悬停在其中一个方块上时，不管我把鼠标放在哪个子项上，实际上总是最后一个 childDivs 的背景在变化。这是为什么？

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); 
        }           
    }

答案＃1

将 var 改为 let：

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

这里有一个工作示例。下面是关于 var 和 let 之间差异的更多信息（简而言之，var childDiv 在第一次迭代时创建一次（并且在 for 循环之外可见），在最后一次迭代时其值被设置为最后一个元素——每个箭头函数()=>{} 使用该 childDiv 及循环执行后的最后值；let childDiv 在每次迭代时“单独”创建（在 for 循环之外不可见）并传递给箭头函数）。