Bagaimana untuk Menukar Warna Latar Belakang Pilihan Senarai Pilih pada Hover?

Menggayakan Pilihan Senarai Pilihan Warna Latar Belakang pada Tuding

Dalam HTML, warna latar belakang lalai pilihan senarai pilih kekal tidak berubah pada tuding. Walau bagaimanapun, sesetengah pengguna mungkin menginginkan perubahan warna latar belakang yang disesuaikan untuk meningkatkan interaktiviti.

Untuk mencapai gelagat yang diingini ini, adalah penting untuk memahami bahawa spesifikasi CSS semasa tidak memberikan sokongan langsung untuk mengubah suai warna latar belakang pilihan pada tuding. Peraturan pemilih CSS seperti option:hover { background-color: yellow; } adalah tidak berkesan.

Satu penyelesaian yang berpotensi ialah menggunakan perpustakaan pihak ketiga seperti Chosen atau select2. Perpustakaan ini menawarkan pilihan penggayaan yang komprehensif, termasuk keupayaan untuk menyesuaikan warna latar belakang pilihan boleh dilegar. Walau bagaimanapun, menggunakan perpustakaan ini memperkenalkan pergantungan luaran.

Pendekatan alternatif, walaupun lebih kompleks, ialah menukar senarai pilihan kepada senarai tidak tertib menggunakan jQuery atau perpustakaan JavaScript yang serupa. Dengan mencipta senarai tersuai tidak tersusun, anda mendapat kawalan sepenuhnya ke atas penggayaan, membolehkan anda menentukan warna latar belakang pilihan berlegar. Berikut ialah contoh:

<code class="html"><ul id="select-list">
  <li value="1">One</li>
  <li value="2">Two</li>
  <li value="3">Three</li>
</ul></code>

<code class="css">#select-list {
  list-style-type: none;
  padding: 0;
}

#select-list li:hover {
  background-color: yellow;
}</code>

<code class="javascript">$('#select-list').hover(function() {
  $(this).css('background-color', 'yellow');
}, function() {
  $(this).css('background-color', 'initial');
});</code>

Atas ialah kandungan terperinci Bagaimana untuk Menukar Warna Latar Belakang Pilihan Senarai Pilih pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!