Mengapa Imej Tuding Saya Bertindih Daripada Menggantikan Yang Asal?

Mengubah suai Paparan Imej dengan CSS/HTML Hover

Apabila cuba menggantikan imej dengan yang lain semasa menuding tetikus, mungkin terdapat keadaan di mana imej asal kekal kelihatan atau imej baharu gagal melaraskan dimensinya, menyebabkan ia bertindih. Berikut ialah pandangan pada isu dan penyelesaian yang mungkin.

Kod yang disediakan menunjukkan masalah:

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="Mengapa Imej Tuding Saya Bertindih Daripada Menggantikan Yang Asal?" >

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

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

Dalam kod ini, menetapkan imej latar belakang pada tuding memastikan yang kedua imej muncul di atas yang pertama tetapi mungkin tidak mengubah saiz atau meletakkan dirinya dengan betul.

Penyelesaian Alternatif: Menggunakan JavaScript

Pilihan lain ialah menggunakan JavaScript untuk mengendalikan perubahan imej:

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="Mengapa Imej Tuding Saya Bertindih Daripada Menggantikan Yang Asal?" >

Dalam pendekatan ini, acara onmouseover menukar sumber imej kepada alternatif apabila tetikus melayang ke atas , dan peristiwa onmouseout mengembalikan sumber kepada imej asal apabila tetikus pergi. Menggunakan JS memberikan lebih kawalan langsung ke atas manipulasi imej, memastikan peralihan yang lancar antara imej.

Atas ialah kandungan terperinci Mengapa Imej Tuding Saya Bertindih Daripada Menggantikan Yang Asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!