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

Question

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

我已经尝试了以下代码，但它没有任何作用。我试图将代码粘贴到此处，但它会出现在消息正文中，所以我在您可以看到的地方制作了这个代码笔。到目前为止，我只是让 index[1] 和 index[2] 图片显示在 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];
        }
    }
}

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

Answer 1

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

如果您想在鼠标悬停时替换 img src，您可以将 onmouseout 替换为 onmouseover。

鼠标移开

let images = document.querySelectorAll('.img');
let mnImg = document.querySelector('#mnImg');

images.forEach(img => {
  img.onmouseout = function() {
    mnImg.src = this.src;
  };
})

img {
  height: 100px;
  width: 100px;
}

<body>
  <div id="legends">
    <img src="https://imagizer.imageshack.com/img921/9646/HCBvlG.jpg" id="mnImg">
    <img src="https://imagizer.imageshack.com/img924/3295/Fb6gMO.jpg" class='img'>
    <img src="https://imagizer.imageshack.com/img923/6089/01GQK7.jpg" class='img'>
  </div>
</body>

鼠标悬停

let images = document.querySelectorAll('.img');
let mnImg = document.querySelector('#mnImg');

images.forEach(img => {
  img.onmouseover = function() {
    mnImg.src = this.src;
  };
})

img {
  height: 100px;
  width: 100px;
}

<body>
  <div id="legends">
    <img src="https://imagizer.imageshack.com/img921/9646/HCBvlG.jpg" id="mnImg">
    <img src="https://imagizer.imageshack.com/img924/3295/Fb6gMO.jpg" class='img'>
    <img src="https://imagizer.imageshack.com/img923/6089/01GQK7.jpg" class='img'>
  </div>
</body>

Answer 2

你快到了。有两点需要注意。一、子节点其实就是一个"NodeList", which is only "array-like"。可以用Array.from(nodeList)转成数组。其次是换行符被读取为 "text" 节点，因此实际上显示了 7 个子节点。您可以使用 Array.prototype.filter() method.

过滤掉它们

然后一旦您处理了实际的 DOM 元素，您就可以设置和重置 src：https://codepen.io/anon/pen/vwjwXm?editors=1010

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

Replacing images on mouseover with only childnodes and javascript

javascript

dom

child-nodes