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

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> 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>

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!

JavaScript css chrome html webkit using background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn