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 alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?" > 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

elemen dengan imej latar belakang digantikan pada tuding:

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

Menggunakan JavaScript

Dengan JavaScript, anda boleh menetapkan sumber <img alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?" > teg pada alih tetikus dan keluar tetikus:

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  alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?" >

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!