Question

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

我已经尝试了以下代码，但是它什么也没做。我尝试将代码粘贴到此处，但是它已经出现在消息正文中，因此我在您可以看到它的地方制作了该Codepen。到目前为止，我只是让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

如果这是您想要的，我刚刚选择了您要在img事件中获取src的所有onmouseout标记。 onmouseout回调函数我刚刚将mnImg.src值替换为当前图像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）将其转换为数组。第二个是将换行符读取为“文本”节点，因此实际上显示了7个childNodes。您可以使用Array.prototype.filter() method过滤掉它们。

然后，当您使用实际的DOM元素时，可以设置和重置src：https://codepen.io/anon/pen/vwjwXm?editors=1010

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

2 个答案: