使用Javascript通过类名称更改元素的内容

Question

我正在尝试对网格应用悬停效果，因此当我的鼠标经过容器时，某个网格正方形将变为黑色。 但是，当我将鼠标悬停在网格上时，整个网格变成黑色。 我已经意识到，当有多个具有相同类名的元素时，它将改变所有元素的颜色。

var hoverContainer = document.getElementById('container');
hoverContainer.addEventListener('mouseover', function(e) {
  var colorChange = document.getElementsByClassName('grid-item');
  for(var i = 0; i < colorChange.length; i++){
    colorChange[i].classList.add('hoverColor');
    console.log(e);
  }
});

我希望朝着正确的方向前进！ 谢谢！

Answer 1

尝试找到closest target .grid-item并更改其classList ：

 var hoverContainer = document.getElementById('container'); hoverContainer.addEventListener('mouseover', function(e) { const gridItem = e.target.closest('.grid-item'); if (gridItem) gridItem.classList.add('hoverColor'); }); 

 .grid-item { border: 1px solid black; } .hoverColor { background-color: yellow; } 

 <div id="container"> <div class="grid-item">item</div> <div class="grid-item">item</div> <div class="grid-item">item</div> <div class="grid-item">item</div> </div> 

（您还需要在鼠标离开.grid-item之后删除hoverColor ）

但是，仅使用CSS，使用:hover ，就可以更轻松地实现：

 .grid-item { border: 1px solid black; } .grid-item:hover { background-color: yellow; } 

 <div id="container"> <div class="grid-item">item</div> <div class="grid-item">item</div> <div class="grid-item">item</div> <div class="grid-item">item</div> </div>