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

Question

我有很多小方块，它们有一类“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.

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

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

或者改用for循环：

for (const tile of tiles) {

  tile.addEventListener('mouseover', e => {

    tile.style.backgroundColor = "black";

  });

}

Answer 2

因为你实际上错过了一个 ')'; 如果您使用箭头功能会更好:)

let black = true;

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

tiles.forEach(tile => {

tile.addEventListener('mouseover', e =>{

  if(black){

    tile.style.backgroundColor = "black";

  }

}) 

})

此外，如this answer中所写-您使用了html集合而不是数组。