Javascript 用悬停在上面的图像填充父div

我对JS还是相当陌生的，我正在尝试用鼠标移过的图片替换div的HTML，当鼠标离开时，我希望它恢复到正常状态。我认为我做的每件事都是对的，但我的代码似乎不起作用。我已经查看了堆栈溢出，看到了很多jQuery解决我的“问题”的方法，但是我想要一个纯JavaScript的答案（我想先“maser”一下），以及一个解释，这样我就可以理解为什么答案是这个答案了。谢谢

我会尽力解释我自己（我的代码）。我抓取了对图像支架的引用，我抓取了对图像的引用。我想我做了一个函数，它在图像数组中循环，并向鼠标移动的图像（图像[I]）添加了一个事件侦听器。然后，我添加了一个事件监听器，该监听器应该通过插入原始HTML将图像持有者返回到默认状态。我只是不知道如何解决这个问题

var holder = document.getElementById('holder');
var images = document.getElementsByTagName('img');

var popImage = function () {
    for (i = 0; i < images.length; i++) {
        images[i].addEventListener('mouseover', = function () {
            holder.innerHTML = images[i];
        });
        images[i].addEventListener('mouseout', function () {
            holder.innerHTML = 
                '<div class='col-md-3 img-fluid' id='img1'><img src='photo1.jpg'></div>
                <div class='col-md-3 img-fluid' id='img2'><img src='photo2.jpg'></div>
                <div class='col-md-3 img-fluid' id='img3'><img src='photo3.2.jpg'></div>
                <div class='col-md-3 img-fluid' id='img4'><img src='photo4.jpg'></div>'
        });
    };
};

popImage();

var holder=document.getElementById（'holder'）；
var images=document.getElementsByTagName（'img'）；
var popImage=函数（）{
对于（i=0；i

你说你是JS新手，只是学习，这很好，但学习JS的一个重要部分是学习什么时候不使用它。正如@Yoda所说的，如果这是为了制作，你真的应该使用CSS而不是JS

这里有一种方法可以通过纯CSS实现这一点

.img{
宽度：100px；
高度：100px；
背景：#bada55；
边框：2倍实心#333；
浮动：左；
}
.holder:hover>.img{
不透明度：0；
}
.holder:hover>.img:hover{
不透明度：1；
}
1.
2.
3.
4.

我下班前有10分钟的时间，所以我尝试了一下，看看我会怎么做，并给你一些想法

这是我的实现（）

我想这里的主要问题是，我已经把它分解成许多小的部分，这使得解决问题更容易，每种方法只涉及一件事

您还将注意到使用类来显示和隐藏内容，而不是完全删除内容，这需要对该功能进行大量艰苦的工作

函数attachEvents（）{
var images=getImages（）；
image.forEach（函数（图像）{
附件（图片）；
附件：事件（图片）；
});
}
功能附件MouseOverEvent（元件）{
元素。addEventListener（'mouseover'，函数（e）{
var clonedImage=e.target.cloneNode（）；
addImageToPreview（克隆图像）；
});
}
函数attachMouseLeaveEvent（元素）{
元素。addEventListener（'mouseleave'，函数（e）{
removeImageFromPreview（）；
});
}
函数getImages（）{
returndocument.querySelectorAll（'.js image'）；
}
函数getImagePreviewElement（）{
return document.querySelector（'.js image box'）；
}
功能addImageToPreview（imageElement）{
var previewElement=getImagePreviewElement（）；
previewElement.classList.add（'previewing'）；
previewElement.appendChild（imageElement）；
}
函数removeImageFromPreview（）{
var previewElement=getImagePreviewElement（）；
previewElement.classList.remove（'previewing'）；
var image=previewElement.querySelector（'.js image'）；
image.remove（）；
}
附件（）
.image框{
位置：相对位置；
最小高度：400px；
宽度：400px；
边框：1px实心#000；
文本对齐：居中；
}
.图像框.占位符{
位置：绝对位置；
最高：50%；
文本对齐：居中；
转化：translateY（-50%）；
宽度：100%；
}
.image-box.previewing.placeholder{
显示：无；
}
.图像框.图像{
位置：绝对位置；
最高：50%；
文本对齐：居中；
转换：翻译（-50%，-50%）；
身高：100%；
宽度：100%；
}
.图像{
边缘顶部：10px；
}

占位符
您是否收到任何控制台错误？代码在哪些方面的行为不符合预期？另外，我想我在第6行看到了一个语法错误：
'mouseover'，=function（）{
…等号在那里做什么？这段代码中有许多语法错误。addEventListener参数中的等号、单引号正在打断分配给holder的字符串。innerHTML和HTML使用双引号作为属性。正如前面所说的，您应该查看控制台，并尝试解决任何错误这就出现了。@Yoda和anid谢谢大家。很困。真不敢相信我没有抓住等号。他们在那里是因为我一直在尝试各种方法。而且，你正在循环中创建函数。这将导致意外行为。请看：@JustinTaddei谢谢。也许就是这样。谢谢。效果很好。需要时间下一次我遇到问题时要考虑到这一点。@EricaKnight我编辑了答案，以显示JS的等价物。正如@Yoda提到的，你用一个类隐藏图像，而不是完全删除它们。但你就是这样做的，所以我在示例中坚持了这一点。谢谢大家！我很感激。我一定会记住这一点的将来。@EricaKnight W3Schools有一个很好的列表。谢谢！我也要试试这个。