Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menukar Warna Latar Belakang Pilihan Senarai Pilih pada Hover?

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

Susan Sarandon
Susan Sarandonasal
2024-11-05 06:51:02953semak imbas

How to Change the Background Color of Select List Options on 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn