為什么只有第一個鼠標懸停和鼠標懸停有效？

Question

我已經加載了一組圖像，並在它們上應用了.mouseout()和.mouseover() 。 問題在於，在第一個.mouseover()事件之后，圖像會變大，並且在.mouseout()之后，圖像會恢復為先前的大小。 第一次之后，沒有.mouseover()事件在Firefox中觸發，但是在Chrome中有效。 問題是Chrome z-index屬性不會將mouseover圖像放在其他圖像之上。 這些問題的原因是什么，我該如何解決？

 var images = ['http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg', 'http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg', 'http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg', 'http://pershanpet.ir/wp-content/uploads/2016/05/144-jpravafcbn.jpg', 'http://www.animal-whisper.com/images/pic28.jpg']; function loadImage(url) { var promise = new Promise((resolve, reject) => { var image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function() { var msg = "could not load image at url " + url; reject(new Error(msg)); }; image.src = url; image.style.width = '200px'; image.style.height = '200px'; }); return promise; } Promise.all( images.map(function(elem) { return loadImage(elem); }) ).then((img) => { img.forEach(each => { each.addEventListener('mouseover', function(event) { this.style.zIndex = '2000'; this.style.transform = 'scale(1.5,1.5)'; }); each.addEventListener('mouseout', function(event) { this.style.transform = 'scale(1,1)'; this.style.zIndex = '-1'; }); addImg(each); }); }); function addImg(img) { document.body.appendChild(img); } 

Answer 1

也許您的圖像處於z-index大於-1其他元素之下。 在將mouseout嘗試this.style.zIndex = '0' 。

Answer 2

您似乎將圖像的z-index為-1 。 有什么理由嗎？

嘗試設置this.style.zIndex = '1'; 在mouseout上。