Bagaimana untuk Mencegah Pertindihan Imej pada Hover Menggunakan CSS dan HTML?

Membetulkan Pertindihan Imej pada Tuding dengan CSS/HTML

Apabila cuba menukar imej pada tuding menggunakan CSS dan HTML, adalah perkara biasa untuk menghadapi isu di mana imej asal kekal kelihatan atau imej baharu kelihatan tidak berskala dengan betul. Begini cara untuk menyelesaikan masalah ini:

Dalam HTML anda, anda mempunyai elemen dengan ID "Library":

<img src="LibraryTransparent.png">

Dan dalam CSS anda, anda mempunyai peraturan gaya berikut:

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

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

Isunya di sini ialah semasa anda menukar latar belakang imej untuk keadaan tuding, anda tidak menyembunyikan imej asal. Untuk membetulkannya, anda boleh menggunakan sifat paparan untuk menjadikan imej asal tidak kelihatan pada tuding:

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

Sebagai alternatif, anda boleh menggunakan JavaScript untuk menukar atribut src bagi elemen pada tuding:

document.getElementById("Library").onmouseover = function() {
  this.src = 'LibraryHoverTrans.png';
};

document.getElementById("Library").onmouseout = function() {
  this.src = 'LibraryTransparent.png';
};

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh memastikan bahawa imej asal disembunyikan dan imej baharu muncul berskala dengan betul apabila anda menuding di atas imej.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pertindihan Imej pada Hover Menggunakan CSS dan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!