Javascript 添加'；鼠标盖'；和'；鼠标输出'；getElementByTagName（）仅将事件应用于最后一项的事件侦听器

各位。我目前正在尝试制作一个15块的幻灯片拼图。标准是，当我将鼠标移到幻灯片拼图中的某个块上时，应该将该块上的边框设置为红色，当我将鼠标移离该块时，边框应返回黑色。问题是mouseover和mouseout事件似乎只对通过for循环的最后一项起作用，而我很难找到解决方案

我尝试了很多不同的方法，包括用其他代码组合编写eventListeners，但没有得到成功的结果。这实际上是我最近的一次

以下是有关的具体代码：

function movePiece(){
    var elements = document.getElementById("puzzlearea").getElementsByTagName('div');

    for(var i=0; i<elements.length; i++){

        var item = elements.item(i);

        elements[i].addEventListener('mouseover', function(e){
            item.style.border = "5px solid red";
        },false);

        elements[i].addEventListener('mouseout', function(e){
            console.log(item);
            item.style.border = "5px solid black";
        },false);
    }
}

---

我感谢所有的帮助

您根本不需要javascript事件来执行此操作，只需使用新的CSS选择器即可

#拼图区域分区：悬停{
边框颜色：红色；
}

下面是一个演示，其中包含了大部分代码

#拼图区{
宽度：400px；
高度：400px；
字号：40pt；
颜色：白色；
左边距：自动；
右边距：自动；
位置：相对位置；
}
#分区{
背景图片：url（'background.jpg'）；
宽度：90px；
高度：90px；
边框：5px纯黑；
浮动：左；
游标：默认值；
}
#拼图区分区：悬停{
边框颜色：红色；
}
#拼图区分区状态-1：悬停{
边框颜色：绿色；
}
#拼图区分区状态-2：悬停{
边框颜色：紫色；
}

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

您可以在css中添加一个悬停选择器

border: 5px solid black;

:hover {
    border: 5px solid red;
}

---

正如其他人提到的，您可以通过CSS轻松实现这一点。但由于这只是更大行动计划中的一个步骤，您的功能应该通过将

item.style.border

更改为

e.target.style.border

来实现

这是因为在应用事件侦听器时，循环已经完成，并且eventHandler函数（附加到每个元素）将引用到

项
，作为
for循环中的最后一项

function movePiece(){
    var elements = document.getElementById("puzzlearea").getElementsByTagName('div');

    for(var i=0; i<elements.length; i++) {

        elements[i].addEventListener('mouseover', function(e){
            e.target.style.border = "5px solid red";
        },false);

        elements[i].addEventListener('mouseout', function(e){
            console.log(e.target);
            e.target.style.border = "5px solid black";
        },false);
    }
};

函数movePiece（）{
var elements=document.getElementById（“拼图区”）.getElementsByTagName（“div”）；
对于（var i=0；我不只是使用CSS:hover，省去了很多麻烦，使用CSS:
#puzzarea>div{border:5px solid black；}#puzzarea>div:hover{border:5px solid red；}
如果允许您在代码中添加一些比使用命名代码更简单的内容，这很好，很抱歉我没有指定这一点，但下一步我要做的只是在满足特定条件的情况下更改一件作品的边框颜色。有没有更简单的方法将其合并到其中？或者我们正在讨论更详细的内容深度？从本质上讲，如果一块可以移动到幻灯片拼图的空槽中，那么它需要在悬停时变为红色边框。您可以为不同的条件添加CSS类，然后使用CSS规则覆盖以前的悬停状态。我在回答中更新了代码，以显示这一点。