將父鼠標懸停在上面的圖像上

Question

我對JS還是很陌生，我試圖用鼠標懸停的圖片替換div的HTML，當鼠標離開時，我希望它返回到正常狀態。 我以為我所做的一切都正確，但是我的代碼似乎無法正常工作。 我已經研究了堆棧溢出問題，並且看到了很多針對我的“問題”的jQuery解決方案，但是我想用純JavaScript給出答案（我首先嘗試“處理”），並附上說明，以便我了解為什么答案就是答案。 謝謝。

我將嘗試解釋一下自己（我的代碼）。 我抓取了對圖像支架的引用，並且抓取了對圖像的引用。 我以為我做了一個遍歷圖像數組的函數，並向鼠標懸停的圖像（image [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();

Answer 1

您說過，您是JS的新手，只是學習是很棒的，但是學習JS的重要部分是學習何時不使用它。 正如@Yoda所說，如果這是用於生產，那么您確實應該使用CSS而不是JS。

這是使用純CSS完成此操作的一種方法

 <style> .img { width: 100px; height: 100px; background: #bada55; border: 2px solid #333; float: left; } .holder:hover > .img { opacity: 0; } .holder:hover > .img:hover { opacity: 1; } </style> <div class="holder"> <!-- Using div.img for simplicity, these whould be your <img/> tags --> <div class="img">1</div> <div class="img">2</div> <div class="img">3</div> <div class="img">4</div> </div> 

為了學習的目的，這是您在JS中要做的事情：

 var holder = document.getElementById('holder'); var images = document.querySelectorAll('.img'); var filter = false; function popImage () { // Use for (var i = 0 . . . // Instead of for (i = 0 . . . // Because without var, i will be stored in the global scope for (var i = 0; i < images.length; i++) { (function (_i) { images[_i].addEventListener('mouseover', function () { holder.innerHTML = ''; // We can't set innerHTML to images[_i] // because it's a DomNode not a string holder.appendChild(images[_i]); }); })(i); } holder.addEventListener('mouseout', function (e) { if (e.target !== holder) return; holder.innerHTML = ''; // Again, use var j = 0 . . . for (var j = 0; j < images.length; j++) { holder.appendChild(images[j]); } }); } popImage(); 

 .img { width: 100px; height: 100px; background: #bada55; border: 2px solid #333; display: inline-block; } #holder { position: relative; width: 100%;// So doesn't collape and trigger mouseout height: 100px; background: red; padding: 20px 0; } 

 <div id="holder"> <!-- Again, these would be your image tags --> <div class="img">1</div> <div class="img">2</div> <div class="img">3</div> <div class="img">4</div> </div> 

Answer 2

我下班前有10分鍾的時間，所以我很想了解如何做並給您一些想法。

這是我的實現（ https://jsfiddle.net/hg7s1pyh/ ）

我想這里的主要問題是我將其分解為許多較小的部分，這使解決問題變得容易得多，每種方法只關心做一件事情。

您還將注意到使用類來顯示和隱藏內容，而不是將其完全刪除，這使該功能花費了很多艱巨的工作。

 function attachEvents() { var images = getImages(); images.forEach(function(image) { attachMouseOverEvent(image); attachMouseLeaveEvent(image); }); } function attachMouseOverEvent(element) { element.addEventListener('mouseover', function(e) { var clonedImage = e.target.cloneNode(); addImageToPreview(clonedImage); }); } function attachMouseLeaveEvent(element) { element.addEventListener('mouseleave', function(e) { removeImageFromPreview(); }); } function getImages() { return document.querySelectorAll('.js-image'); } function getImagePreviewElement() { return document.querySelector('.js-image-box'); } function addImageToPreview(imageElement) { var previewElement = getImagePreviewElement(); previewElement.classList.add('previewing'); previewElement.appendChild(imageElement); } function removeImageFromPreview() { var previewElement = getImagePreviewElement(); previewElement.classList.remove('previewing'); var image = previewElement.querySelector('.js-image'); image.remove(); } attachEvents(); 

 .image-box { position: relative; min-height: 400px; width: 400px; border: 1px solid #000; text-align: center; } .image-box .placeholder { position: absolute; top: 50%; text-align: center; transform: translateY(-50%); width: 100%; } .image-box.previewing .placeholder { display: none; } .image-box .image { position: absolute; top: 50%; text-align: center; transform: translate(-50%, -50%); height: 100%; width: 100%; } .images { margin-top: 10px; } 

 <div class="js-image-box image-box"> <div class="placeholder"> Placeholder </div> </div> <div class="images"> <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div> <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/150x150"></div> <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/400x400"></div> <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div> </div>