我想为我的 parentDiv
中的所有子元素添加鼠标悬停效果。但是现在,如果我将鼠标悬停在其中一个方 block 上,我的 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);
}
}
最佳答案
将 var 更改为:
let childDiv = document.createElement("div");
工作示例 here .这里是关于 var and let 之间差异的更多信息(简而言之,var childDiv
在第一次迭代时创建一次(并且在循环外部可见),在最后一次迭代时,它的值设置为最后一项 - 每个箭头函数 ()=>{} 使用 childDiv
及其在循环执行后的最后一个值;let childDiv
在每次迭代时“单独”创建(它在 for 循环外不可见)并传递给箭头函数)。
关于javascript - 向子 div 添加悬停效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53328495/