Wie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?

Ändern der Bildquell-URL beim Hover

Problem:

Sie möchten die Quell-URL eines Tag, wenn der Benutzer mit der Maus darüber fährt.

Versuch und Problem:

Ihr erster Ansatz mit der Content-Eigenschaft von CSS und :hover selector hat nicht funktioniert.

Lösung:

Während das src-Attribut direkt mit CSS nicht geändert werden kann möglich, hier sind zwei alternative Methoden mit HTML, CSS und JavaScript:

Methode 1: Hintergrundbilder verwenden

1. Ersetzen Sie das <img alt="Wie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?" > Tag mit einem
   Tag.
2. Legen Sie das Hintergrundbild des
   fest. zum Standardbild mithilfe von CSS.
3. Verwenden Sie den :Hover-Selektor, um das Hintergrundbild auf das Hover-Bild zu aktualisieren.

<div>
<pre class="brush:php;toolbar:false">#my-div:hover {
    background: url(hover-image.jpg);
}

Methode 2: Verwenden JavaScript

1. Definieren Sie JavaScript-Funktionen, um das src-Attribut beim Schweben zu ändern und unhover.
2. Weisen Sie die Hover-Funktion dem Onmouseover-Ereignis und die Unhover-Funktion dem Onmouseout-Ereignis des <img alt="Wie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?" > zu. Tag.

<img  alt="Wie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?" >

function hoverImage(element) {
    element.src = "hover-image.jpg";
}

function unhoverImage(element) {
    element.src = "default-image.jpg";
}