Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?

Mengubah suai Sumber Imej pada Tuding Menggunakan HTML, CSS dan JavaScript

Untuk mengubah suai URL sumber <img> teg semasa melayang, pelbagai pendekatan boleh diambil.

CSS Sahaja (Khusus Webkit)

Menggunakan CSS sahaja, anda boleh menggantikan imej dengan URL lain pada berlegar. Walau bagaimanapun, ia hanya berfungsi dalam penyemak imbas berasaskan Webkit seperti Google Chrome:

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

Menggunakan Imej Latar Belakang Div

Sebagai alternatif, anda boleh menggunakan

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

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>