仅用子节点和 javascript 替换鼠标悬停时的图像

Question

我必须并排放置三个图像，并使用 onmouseover 功能，当用户将鼠标移到图像上时，该特定图像将复制到其他两个图像上。当用户将鼠标从图像中移出时，图像将恢复为初始页面。但是我必须为此使用子节点。我无法弄清楚这一点。

我试过下面的代码，但它没有做任何事情。我试图将代码粘贴到这里，但它已经出现在消息正文中，所以我在你可以看到的地方制作了这个代码笔。到目前为止，我只是想让 index[1] 和 index[2] pic 显示在 index[0] 上，但没有发生其他变化。 https://codepen.io/anon/pen/xNjezN

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];

        }

    }

}

如果有人可以请提出建议。