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

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

Susan Sarandon
Lepaskan: 2024-11-05 06:51:02
asal
1010 orang telah melayarinya

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>
Salin selepas log masuk
<code class="css">#select-list {
  list-style-type: none;
  padding: 0;
}

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

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan