Javascript Js mousover事件

我有一个16×16的网格，我试图在鼠标上把一个网格单元变成黑色，我尝试了各种类型的事件，所以我一定把我的标签弄乱了

<script>
  // grid creation
  const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
    for (c = 0; c < (rows * cols); c++) {
        let cell = document.createElement("div");
        cell.innerText = (c + 1);
        container.appendChild(cell).className = "grid-item";
  };
};
makeRows(16, 16);
// mouseover black
    let cell = container.getElementsByClassName("grid-item");
        cell.addEventListener("mouseover", function() {
        cell.style.setProperty('backgroundColor', black);

});

//网格创建
const container=document.getElementById（“容器”）；
函数生成行（行、列）{
container.style.setProperty（'--grid rows'，rows）；
container.style.setProperty（'--grid cols'，cols）；
对于（c=0；c<（行*列）；c++）{
让cell=document.createElement（“div”）；
cell.innerText=（c+1）；
container.appendChild（cell.className=“网格项”；
};
};
makeRows（16,16）；
//黑鼠标
让单元格=container.getElementsByClassName（“网格项”）；
cell.addEventListener（“mouseover”，function（））{
cell.style.setProperty（'backgroundColor'，黑色）；
});

const container=document.getElementById（“容器”）；
container.addEventListener（“鼠标悬停”，函数（e）{
设el=e.target；
如果（el.匹配（“.网格项”））{
el.style.backgroundColor=“black”；//需要引用，除非black是变量名
}
});
函数生成行（行、列）{
//@见https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
让fragment=newdocumentfragment（）；
container.style.setProperty（'--grid rows'，rows）；
container.style.setProperty（'--grid cols'，cols）；
对于（c=0；c<（行*列）；c++）{
让cell=document.createElement（“div”）；
cell.innerText=（c+1）；
fragment.appendChild（cell.className=“网格项”；
};
子容器（片段）；
};
makeRows（16,16）
/*此CSS只是为了让可视化示例正常工作*/
#容器{
宽度：816px；
}
.表格项目{
宽度：100px；
高度：100px；
边框：1px纯黑；
浮动：左；
}
.盘旋{
背景颜色：黄色；
}
你也可以分享你的html代码吗？我的html是空的，我上面有一个名为容器的div。谢谢你，我将不得不进一步研究DocumentFragment（），我也不知道
DocumentFragment
，太棒了！由于这个解决方案，我们可以避免无用的昂贵的DOM操作！爱it@DanDeGraafDocumentFragment提高了性能，因此当我们将片段附加到DOM时，函数会导致一次重画，而不是在附加每个元素时重画256次。它其实并没有那么复杂-它就像一个模拟文档，您可以将节点附加到它并遍历它，但它实际上并没有显示出来，所以它不会导致昂贵的UI回流。@DanDeGraaf如果这回答了您的问题，您应该接受答案。