爲什麼只有第一次鼠標懸停和鼠標懸停工作？

我已經加載了一組圖像，並在其上應用了.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); 
 
}

來源

2016-09-15 AL-zami

您能夠設置問題的演示嗎？在jsfiddle或什麼的？ –

小提琴加入 –

也許你的圖像得到下與z-index一些其他的元素比-1更大。在mouseout嘗試this.style.zIndex = '0'。

來源

2016-09-15 22:31:22

好的設置z指數解決了Firefox的，但不是鉻。爲什麼它在鉻表現不同 –

看起來您將圖像的z-index設置爲-1。有什麼理由呢？

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

來源

2016-09-15 22:43:12

爲什麼只有第一次鼠標懸停和鼠標懸停工作？

回答

相關問題