为什么只有第一个鼠标悬停和鼠标悬停有效？

Question

I have loaded a set of images and applied .mouseout() and .mouseover() on them. The problem is that after the first .mouseover() event the image gets larger and after .mouseout() is fired the image is returned back to its previous size. After the first time, no .mouseover() event gets fired in Firefox, but in Chrome it works. The problem is that the Chrome z-index property does not put the mouseover image on top of other images. What is the reason for these problems and how can I solve them?

 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

Maybe your images get under some other elements with z-index that is greater than -1 . On mouseout try this.style.zIndex = '0' .

Answer 2

It appears that you're setting the image's z-index to -1 . Any reason for that?

Try setting this.style.zIndex = '1'; on mouseout.