Wie kann ich eine Bildquelle beim Schweben ändern?

Bildquelle beim Hover ändern: Eine umfassende Anleitung

Es kann vorkommen, dass Sie die Quell-URL eines < dynamisch ändern müssen ;img> Tag, wenn die Maus darüber fährt. Auch wenn es wie eine unkomplizierte Aufgabe erscheint, ist sie nicht so einfach zu bewältigen, wie man vielleicht denkt.

Die CSS-Falle

Zunächst könnten Sie versuchen, die Content-Eigenschaft von CSS als Ersatz zu verwenden die Bildquelle, wie im folgenden Code zu sehen:

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Dieser Ansatz funktioniert jedoch nur für Webkit-Browser wie Google Chrome. Andere große Browser wie Firefox und Safari ignorieren in diesem Zusammenhang die Content-Eigenschaft.

Die HTML- und CSS-Alternative

Wenn CSS keine Option ist, können Sie dies tun Erwägen Sie, das <img> Tag mit einem <div> Etikett. Durch Festlegen des Hintergrundbilds des <div> und indem Sie es beim Schweben ändern, können Sie effektiv das gewünschte Ergebnis erzielen:

<div>

#my-div {
    background-image: url('http://dummyimage.com/100x100/000/fff');
}

#my-div:hover {
    background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Die JavaScript-Lösung

Für die größtmögliche Vielseitigkeit können Sie JavaScript nutzen um das src-Attribut des <img> direkt zu manipulieren. Etikett. Dieser Ansatz funktioniert in allen gängigen Browsern:

<img>

const myImg = document.getElementById('my-img');

myImg.addEventListener('mouseover', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
});

myImg.addEventListener('mouseout', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
});

Durch den Einsatz einer dieser Techniken können Sie die Quell-URL eines <img>-Kontos nahtlos ändern. Markieren Sie beim Hover und bieten Sie dynamische und ansprechende visuelle Erlebnisse für Ihre Webanwendungen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Bildquelle beim Schweben ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!