Wie kann ich eine Bildquelle beim Hover mithilfe von HTML, CSS und JavaScript ändern?-CSS-Tutorial-php.cn

Wie kann ich eine Bildquelle beim Hover mithilfe von HTML, CSS und JavaScript ändern?

Patricia Arquette

Freigeben： 2024-12-23 00:24:10

Original

637 Leute haben es durchsucht

How Can I Change an Image Source on Hover Using HTML, CSS, and JavaScript?

Ändern der Bildquelle beim Hover mit HTML, CSS und JavaScript

Um die Quell-URL eines <img> Tag beim Bewegen des Mauszeigers können verschiedene Ansätze gewählt werden.

Nur CSS (Webkit-spezifisch)

Mit CSS allein können Sie das Bild durch eine andere URL ersetzen schweben. Es funktioniert jedoch nur in Webkit-basierten Browsern wie Google Chrome:

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

Nach dem Login kopieren

Ein Div-Hintergrundbild verwenden

Alternativ können Sie ein

verwenden. Element mit einem Hintergrundbild, das beim Hover ersetzt wird:

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

Nach dem Login kopieren

Verwendung von JavaScript

Mit JavaScript können Sie die Quelle des <img>-Elements dynamisch festlegen. Tag bei Mouseover und Mouseout:

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

Nach dem Login kopieren

<img>

Nach dem Login kopieren

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