Javascript-mouseover/out事件同时在所有同级元素上激发

我有四个兄弟元素和一个“box”类。我使用带有for循环的

getElementsByClassName（）

迭代匹配的元素集，并使用

addEventListener（）

方法将

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');

函数悬停（电子课堂）{
var elem=document.getElementsByClassName（eClass）；
对于（var i=0；i我检查了您的代码。这很好。事实上，您尝试将鼠标悬停在最后一个（底部）正方形，只有它会消失。当你悬停在顶部时，它会消失，下一个会变成顶部，所以它也会消失，依此类推，直到所有的方块都消失。这种情况发生得太快了，所有的正方形都会一次消失…
我检查了你的代码。这很好。事实上，你尝试悬停在最后一个（底部）正方形，只有它会消失。当你悬停在顶部时，它消失了，下一个变成了顶部，所以它也消失了，等等，直到所有的方块都消失了。这发生得太快了，所有的正方形都一下子消失了…
这很有趣，花了一段时间才发现这只是一个实际问题。当你悬停在fi上时rst框，它被删除，下一个被重新绘制到位。但随后事件在框2上再次激发，因为它现在位于光标下方，因此它将继续。当然，这发生得太快，看不见，但这就是发生的情况。如果您真的想从浏览器的绘图功能中删除元素，则必须找出要停止的内容在下一个元素上触发的事件，或设置不透明度：0

更新

这有点难看，但是移除事件侦听器并再次添加它们说明了这是如何工作的

这很有趣，花了一段时间才发现这只是一个实际问题。当你将鼠标悬停在第一个框上时，它会被删除，而下一个框会在它的位置重新绘制。但随后事件会在框2上再次触发，因为它现在在光标下方，所以它会继续。当然，这发生得太快，看不见，但这就是正在发生的事情。如果你真的想知道如果要从浏览器的绘图功能中删除该元素，则必须找出一些方法来停止在下一个元素上触发事件，或者设置不透明度：0

更新

这有点难看，但是移除事件侦听器并再次添加它们说明了这是如何工作的

misher
击败了我，但事实就是如此。我在
DIV
s中输入了1-4：

<div class="container">
    <div class="box grey">1</div>
    <div class="box grey">2</div>
    <div class="box grey">3</div>
    <div class="box grey">4</div>
</div>

毫不奇怪，一旦
显示设置为
无
，元素将向上移动，因为您悬停的元素不再使用CSS。您可以使用
可见性
来防止这种情况发生，但
鼠标出
事件不会触发不可见元素

稍微调整一下，您就可以使用
data
属性和
mousemove
事件将元素保持在适当的位置；如果页面重新调整大小或移动X和Y值将被关闭，这只会触发一次，可能会出现一个
窗口。onresize
会解决这个问题，但以下是：

function hover(eClass) {
    var elem = document.getElementsByClassName(eClass);
    for (var i = 0; i < elem.length; i++) {
        elem[i].addEventListener('mouseover', mouseOver);
    }
    document.addEventListener('mousemove', mouseMove);
    function mouseOver() {
        var minX = this.offsetLeft;
        var maxX = minX + this.offsetWidth;
        var minY = this.offsetTop;
        var maxY = minY + this.offsetHeight;
        this.setAttribute('data-minx', minX);
        this.setAttribute('data-maxx', maxX);
        this.setAttribute('data-miny', minY);
        this.setAttribute('data-maxy', maxY);
        this.style.visibility = 'hidden';
    }
    function mouseMove(e) {
        e = e || event;
        for(i = 0; i < elem.length; i++) {
            var div = elem[i];
            var minX = div.getAttribute('data-minx');
            var maxX = div.getAttribute('data-maxx');
            var minY = div.getAttribute('data-miny');
            var maxY = div.getAttribute('data-maxy');
            if(e.clientX >= minX && e.clientX <= maxX && e.clientY >= minY && e.clientY <= maxY) {
                // over the Div
            } else {
                div.style.visibility = 'visible';
            }
        }
    }
}

hover('box');

函数悬停（电子课堂）{
var elem=document.getElementsByClassName（eClass）；
对于（变量i=0；i如果（e.clientX>=minX&&e.clientX=minY&&e.clientY
misher
击败了我，但事实就是这样。我在
分区中输入了1-4：

<div class="container">
    <div class="box grey">1</div>
    <div class="box grey">2</div>
    <div class="box grey">3</div>
    <div class="box grey">4</div>
</div>

毫不奇怪，一旦
显示设置为
无
，元素将向上移动，因为您悬停的元素不再使用CSS。您可以使用
可见性
来防止这种情况发生，但
鼠标出
事件不会触发不可见元素

稍微调整一下，您就可以使用
data
属性和
mousemove
事件将元素保持在适当的位置；如果页面重新调整大小或移动X和Y值将被关闭，这只会触发一次，可能会出现一个
窗口。onresize
会解决这个问题，但以下是：

function hover(eClass) {
    var elem = document.getElementsByClassName(eClass);
    for (var i = 0; i < elem.length; i++) {
        elem[i].addEventListener('mouseover', mouseOver);
    }
    document.addEventListener('mousemove', mouseMove);
    function mouseOver() {
        var minX = this.offsetLeft;
        var maxX = minX + this.offsetWidth;
        var minY = this.offsetTop;
        var maxY = minY + this.offsetHeight;
        this.setAttribute('data-minx', minX);
        this.setAttribute('data-maxx', maxX);
        this.setAttribute('data-miny', minY);
        this.setAttribute('data-maxy', maxY);
        this.style.visibility = 'hidden';
    }
    function mouseMove(e) {
        e = e || event;
        for(i = 0; i < elem.length; i++) {
            var div = elem[i];
            var minX = div.getAttribute('data-minx');
            var maxX = div.getAttribute('data-maxx');
            var minY = div.getAttribute('data-miny');
            var maxY = div.getAttribute('data-maxy');
            if(e.clientX >= minX && e.clientX <= maxX && e.clientY >= minY && e.clientY <= maxY) {
                // over the Div
            } else {
                div.style.visibility = 'visible';
            }
        }
    }
}

hover('box');

函数悬停（电子课堂）{
var elem=document.getElementsByClassName（eClass）；
对于（变量i=0；i