[英]Why is only the first mouse-over and mouse-out working?
我已经加载了一组图像,并在它们上应用了.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); }
也许您的图像处于z-index
大于-1
其他元素之下。 在将mouseout
尝试this.style.zIndex = '0'
。
您似乎将图像的z-index
为-1
。 有什么理由吗?
尝试设置this.style.zIndex = '1';
在mouseout上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.