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> teg dengan <div> tag. Dengan menetapkan imej latar belakang <div> dan mengubah suainya pada tuding, anda boleh mencapai hasil yang diingini dengan berkesan:

<div>

#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> tag. Pendekatan ini berfungsi merentas semua penyemak imbas utama:

<img>

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> teg pada tuding, memberikan pengalaman visual yang dinamik dan menarik untuk aplikasi web anda.

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