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

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集合而不是数组。