仅使用childnodes和javascript替换鼠标上的图像

我必须并排放置三个图像，在mouseover函数中，当用户将鼠标移到一个图像上时，该特定图像将复制到其他两个图像上。当用户将鼠标移出图像时，图像将恢复为初始页面。 但我必须使用childnodes来实现这一点。我没办法弄明白

我已经尝试了下面的代码，但它没有任何作用。 我试着把代码粘贴到这里，但是它被贴到了消息的主体上，所以我在你可以看到的地方制作了这个代码笔。 到目前为止，我只想让索引[1]和索引[2]图片显示在索引[0]上，但没有发生其他变化。

---

如果有人能给我一些建议。

如果这是你想要的，我刚刚选择了所有你想要的img标签，从onmouseout事件中获取src。onmouseout回调函数我刚刚将mnImg.src值替换为当前图像src

如果您想在鼠标上方替换img src，可以将onmouseout替换为onmouseover

老鼠出没

让images=document.queryselectoral.img'； 设mnImg=document.querySelector'mnImg'； images.forEachimg=>{ img.onmouseout=函数{ mnImg.src=this.src； }; } img{ 高度：100px； 宽度：100px； }

---

你快到了。有两件事需要注意。第一，子节点实际上是一个。可以使用array.fromnodeList将其转换为数组。 第二个是换行符被读取为文本节点，因此实际上显示了7个子节点。你可以用滤纸把它们过滤掉

---

然后，一旦使用实际的DOM元素，就可以设置并重置src:

非常感谢。这个很完美。感谢您向我介绍阵列过滤器。

function heroes(q){
    if(q.src == imgArray[0])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[0];
        }
    }
    else if(q.src == imgArray[1])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[1];
        }
    }
    else if(q.src == imgArray[2])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[2];
        }
    }
}