Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover?

Tukar Sumber Imej pada Tuding: Panduan Komprehensif

Anda mungkin menghadapi senario di mana anda perlu menukar URL sumber < secara dinamik ;img> tag apabila tetikus melayang di atasnya. Walaupun ia kelihatan seperti tugas yang mudah, ia tidak semudah yang disangkakan.

Perangkap CSS

Pada mulanya, anda mungkin cuba menggunakan sifat kandungan CSS untuk menggantikan sumber imej, seperti yang dilihat dalam kod berikut:

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

Walau bagaimanapun, pendekatan ini hanya berfungsi untuk pelayar Webkit seperti Google Chrome. Penyemak imbas utama lain, seperti Firefox dan Safari, mengabaikan sifat kandungan dalam konteks ini.

Alternatif HTML dan CSS

Jika CSS bukan pilihan, anda boleh pertimbangkan untuk menggantikan <img alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover?" > teg dengan

tag. Dengan menetapkan imej latar belakang

dan mengubah suainya pada tuding, anda boleh mencapai hasil yang diingini dengan berkesan:

<div>
<pre class="brush:php;toolbar:false">#my-div {
    background-image: url('http://dummyimage.com/100x100/000/fff');
}

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

Penyelesaian JavaScript

Untuk kepelbagaian yang paling, anda boleh memanfaatkan JavaScript untuk memanipulasi secara langsung atribut src bagi <img alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover?" > tag. Pendekatan ini berfungsi merentas semua penyemak imbas utama:

<img  alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover?" >

const myImg = document.getElementById('my-img');

myImg.addEventListener('mouseover', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
});

myImg.addEventListener('mouseout', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
});

Dengan menggunakan salah satu teknik ini, anda boleh menukar URL sumber <img alt="Bagaimanakah Saya Boleh Mengubah Sumber Imej pada Hover?" > teg pada tuding, memberikan pengalaman visual yang dinamik dan menarik untuk aplikasi web anda.