javascript - 如何利用鼠标悬停效果来改变背景颜色？

Question

我有很多小方 block ，它们都有一个“newDiv”类。当鼠标光标位于其上时，我想将其背景颜色更改为黑色。但是，我希望它们保持不变(背景色黑色)，即使鼠标光标不在时也是如此。我试图让我的代码工作，但总是出现语法错误，或者根本不起作用。

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

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



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

参数列表后未捕获的语法错误缺少 )tiles.forEach 不是一个函数。

Answer 1

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

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

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

或者使用 for 循环代替:

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