Bagaimanakah Saya Boleh Menghalang Pertindihan Imej Apabila Menukar Imej pada Hover dengan CSS atau JavaScript?

Menyesuaikan Penampilan Imej pada Tuding dengan HTML, CSS dan JavaScript

Apabila berurusan dengan peralihan imej pada tuding, anda mungkin menghadapi isu biasa di mana imej asas kekal kelihatan dan imej yang dikemas kini tidak menyesuaikan dengan ketinggian dan lebar yang dikehendaki, menyebabkan pertindihan.

Dalam coretan kod anda:

<img src="LibraryTransparent.png">

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

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

Percubaan anda untuk menukar imej latar belakang adalah betul. Walau bagaimanapun, untuk menangani isu ketinggian dan lebar, anda boleh menggunakan sifat CSS berikut dalam pemilih :hover:

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

Saiz latar belakang: sifat penutup memastikan imej yang dikemas kini memenuhi seluruh ruang elemen, menghalang pertindihan.

Sebagai alternatif, anda boleh menggunakan JavaScript untuk mengendalikan peralihan imej. Pendekatan ini membolehkan anda menukar atribut src imej secara langsung:

<img src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png'" onmouseout="this.src='LibraryTransparent.png'" />

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Pertindihan Imej Apabila Menukar Imej pada Hover dengan CSS atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!