Bagaimana untuk Menukar Imej dengan Lancar pada Hover Menggunakan CSS atau JavaScript?

Cara Menukar Imej Secara Dinamik pada Tuding Menggunakan CSS/HTML

Apabila menetapkan imej untuk berubah secara dinamik apabila tetikus melayang, adalah penting untuk menangani nuansa tertentu untuk memastikan kesan yang diinginkan tercapai. Satu isu biasa timbul apabila imej asal kekal dan bertindih dengan imej baharu, manakala ketinggian dan lebar mungkin tidak dilaraskan dengan sewajarnya.

Coretan Kod:

Pertimbangkan contoh HTML ini /Kod CSS:

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="Bagaimana untuk Menukar Imej dengan Lancar pada Hover Menggunakan CSS atau JavaScript?" >

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

Menggunakan imej latar belakang dalam keadaan :hover ialah satu pendekatan untuk menukar imej secara dinamik. Walau bagaimanapun, penyelesaian tambahan boleh digunakan menggunakan JavaScript:

Pilihan JavaScript:

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="Bagaimana untuk Menukar Imej dengan Lancar pada Hover Menggunakan CSS atau JavaScript?" >

Dalam senario ini, JavaScript digunakan untuk menukar sumber imej apabila tetikus melayang di atas dan memulihkannya apabila tetikus keluar. Kaedah ini memastikan imej asal hilang dan imej baharu menggantikannya dengan lancar, mengelakkan sebarang masalah pertindihan atau saiz.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Imej dengan Lancar pada Hover Menggunakan CSS atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!