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 < img> 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> Tag mit einem <div> Tag.
2. Legen Sie das Hintergrundbild des <div> fest. zum Standardbild mithilfe von CSS.
3. Verwenden Sie den :Hover-Selektor, um das Hintergrundbild auf das Hover-Bild zu aktualisieren.

<div>

#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> zu. Tag.

<img>

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

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

Das obige ist der detaillierte Inhalt vonWie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!