0
イメージのセットをロードし、.mouseout()と.mouseover()を適用しました。問題は、最初の.mouseover()イベントの後にイメージが大きくなり、.mouseout()が発生した後にイメージが以前のサイズに戻されることです。初めてFirefoxの場合は.mouseover()というイベントは発生しませんが、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);
}
問題のデモンストレーションを設定できますか？ jsfiddleや何か？ –
フィドルが追加されました –