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

Ä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');
}

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');
}

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');
}

<img>

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!

JavaScript css chrome html webkit using background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn