JavaScriptでホバーすると画像が切り替わります

Question

タイトル。

私はIMG要素が使用されているときにそれを行う方法をたくさん見てきました：

<img src="blah" id="get" onmouseover="newImage()" onmouseout="oldImage() 

Javavscript

function newImage() { document.getElementById(get").src="blah2"} 
function oldImage() { document.getElementById("get").src="blah"} 

しかし、私は、ID内のbackground-image: url()としてCSSの私のイメージを保持：

<div id="image" 

どのようにイメージをCSSに適用するのかその上にはdivid

新しいフレームワークはありません。

Answer 1

これにはJavaScriptは必要ありませんが、私は以下のJavaScriptの代替手段を提供しています。ちょうどCSSの:hover疑似クラスを使用してください。

#get { 
    background-image: url(/path/to/image/when/not/hovering.png); 
} 
#get:hover { 
    background-image: url(/path/to/image/when/hovering.png); 
} 

例：あなたは本当にそれはだ、ではJavaScriptを使用したい場合は

#get { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-image: url(https://graph.facebook.com/950389301719024/picture?type=small); 
 
} 
 
#get:hover { 
 
    background-image: url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG 
 
); 
 
}

<div id="get"></div>

をしかし：これは、DIVは、通常、ユーザーのアイコンを示し、その後、あなたはそれを置く場合は鉱山を示しあなたが引用したコードに非常に似ていますが、.style.backgroundImageを変更する代わりに、.src：

function startHover(element) { 
 
    element.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)"; 
 
} 
 
function stopHover(element) { 
 
    element.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)"; 
 
}

#get { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)" onmouseover="startHover(this)" onmouseout="stopHover(this)"></div>

しかし、私はonxyz属性の使用を思いとどまら。 （彼らの壊れた "互換性" モードではないIE8、IE9や-IE11で）すべての近代的なブラウザでサポートされてaddEventListenerを使用しています

(function() { 
 
    var div = document.getElementById("get"); 
 
    div.addEventListener("mouseover", function() { 
 
    div.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)"; 
 
    }, false); 
 
    div.addEventListener("mouseout", function() { 
 
    div.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)"; 
 
    }, false); 
 
})();

#get { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)"></div>

、：代わりに取り扱い現代のイベントを使用します。それらをサポートする必要がある場合は、には、ライブラリなしでのブラウザ間イベント処理に使用できる関数があります。