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 alt="Wie kann ich eine Bildquelle beim Schweben ändern?" > Tag mit einem

Etikett. Durch Festlegen des Hintergrundbilds des

und indem Sie es beim Schweben ändern, können Sie effektiv das gewünschte Ergebnis erzielen:

<div>
<pre class="brush:php;toolbar:false">#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 alt="Wie kann ich eine Bildquelle beim Schweben ändern?" > direkt zu manipulieren. Etikett. Dieser Ansatz funktioniert in allen gängigen Browsern:

<img  alt="Wie kann ich eine Bildquelle beim Schweben ändern?" >

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 alt="Wie kann ich eine Bildquelle beim Schweben ändern?" >-Kontos nahtlos ändern. Markieren Sie beim Hover und bieten Sie dynamische und ansprechende visuelle Erlebnisse für Ihre Webanwendungen.