javascript - 如何使用鼠标悬停效果更改背景颜色？

我有很多小方块，它们的类别为“ newDiv”。当鼠标光标悬停在它们上时，我想将其背景颜色更改为黑色。但是，我希望它们保持相同（背景色为黑色），即使鼠标光标移开也是如此。我试图使我的代码正常工作，但是我总是遇到语法错误，或者根本不起作用。

我更改了代码，试图修复语法等。

black = true;
let tiles = document.getElementsByClassName('newDiv');



tiles.forEach(tile => {
tile.addEventListener('mouseover', function(e){
  if(black){
  tile.style.backgroundColor = "black";
  }
})
}

参数列表后缺少未捕获的语法错误）
tile.forEach不是函数。

最佳答案

这是因为tiles不是数组。它看起来像一个，但实际上是一个HTMLCollection。

您可以通过使用Array转换为Array.from()来解决此问题：

let tiles = Array.from(document.getElementsByClassName('newDiv'));

或改用for循环：

for (const tile of tiles) {
  tile.addEventListener('mouseover', e => {
    tile.style.backgroundColor = "black";
  });
}

关于javascript - 如何使用鼠标悬停效果更改背景颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57900945/