Javascript - 鼠标悬停/移出事件同时在所有同级元素上触发

Question

我有四个同级元素，其类别为“box”。我使用 getElementsByClassName() 和 for 循环来迭代匹配的元素集，并使用 addEventListener() 方法绑定(bind) mouseover每个元素的事件。

我遇到的问题是当我在事件处理程序中使用 .style.display 并将鼠标悬停在任何匹配元素上时，所有前面的同级元素都匹配元素更改其显示值。

如果我使用不同的样式方法，例如 .style.backgroundColor 一切正常。我用谷歌搜索和 youtube 搜索，但找不到解决方案。我将不胜感激任何和所有的帮助，谢谢。

代码:

function hover(eClass) {
  var elem = document.getElementsByClassName(eClass);
  for (var i=0;i<elem.length;i++) {
    elem[i].addEventListener('mouseover', mouseOver);
    elem[i].addEventListener('mouseout', mouseOut);
  }
  function mouseOver() {    
    //this.style.backgroundColor = 'red';
    this.style.display = 'none';
  }
  function mouseOut() {
    //this.style.backgroundColor = 'grey';
  }  
}
hover('box');

Codepen example

Answer 1

我检查了你的代码。没关系。事实上，如果您尝试将鼠标悬停在最后一个(底部)方 block 上，它只会消失。当您将鼠标悬停在顶部的一个时，它会消失，下一个会成为顶部的一个，因此它也会消失，依此类推，直到它们全部消失。这发生得太快了，所有方 block 似乎一下子就消失了……