Ändern eines Bildes beim Hover mit Javascript

Question

Titel.

Ich habe eine Menge von Möglichkeiten, es zu tun zu sehen, wenn das IMG Element verwendet wird:

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

Javavscript

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

Aber ich meine Bilder auf CSS als background-image: url() innerhalb einer ID:

Wie ich das gleiche Prinzip anwende, aber wenn Bilder auf CSS sind und sein auf einem divid

NEU ZU JAVASCRIPT BITTE KEINE FRAMEWORKS.

Answer 1

Sie benötigen kein JavaScript (aber ich gebe unten eine JavaScript-Alternative), verwenden Sie einfach die :hover Pseudo-Klasse von CSS.

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

Beispiel: Dieses div zeigt Ihr normalerweise Benutzersymbol, zeigt Mine dann, wenn Sie es schweben:

#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>

Aber wenn Sie wirklich wollen JavaScript verwenden, ist es sehr ähnlich zu dem Code, den Sie zitiert haben, ändern Sie einfach .style.backgroundImage auf Ihrem Element anstelle von .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>

Aber ich entmutigen Verwendung von onxyz Attribute; verwendet moderne Event-Handling statt:

(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>

Die addEventListener verwendet, die von allen modernen Browsern (nicht von IE8 oder IE9-IE11 in ihrem gebrochenen "Kompatibilität" Modus) unterstützt wird. Wenn Sie diese unterstützen müssen, verfügt über eine Funktion, die Sie für die browserübergreifende Ereignisbehandlung ohne Bibliothek verwenden können.