Bagaimana untuk Membuat Pilihan Kotak Pilihan HTML Muncul di Hover?

Cara Memaparkan Pilihan Kotak Pilih HTML pada Tuding

Cabaran yang anda berikan melibatkan mencipta kotak pilihan di mana pilihan disembunyikan sehingga pengguna berlegar di atasnya. Berikut ialah penyelesaian terperinci:

Pelaksanaan:

Kod yang disediakan menggunakan acara hover() jQuery untuk menogol keterlihatan elemen senarai. Kelas CSS yang tidak dipilih digunakan untuk menggayakan item senarai yang tidak dipaparkan pada masa ini.

Penanda HTML:

<code class="html"><select name="size">
  <option value="small">Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>
</select></code>

Gaya CSS:

<code class="css">select {
  opacity: 0.5;
}
ul {
  width: 8em;
  line-height: 2em;
}
li {
  cursor: pointer;
  display: list-item;
  width: 100%;
  height: 2em;
  border: 1px solid #ccc;
  border-top-width: 0;
  text-indent: 1em;
  background-color: #f90;
}
li:first-child {
  border-top-width: 1px;
}
li.unselected {
  display: none;
  background-color: #fff;
}
ul#selectUl:hover li.unselected {
  background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
  display: list-item;
}
ul#selectUl:hover li {
  background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
  background-color: #f90;
}</code>

Pengendalian Acara JavaScript:

<code class="js">$('#selectUl li:not(":first")').addClass('unselected');

$('#selectUl').hover(
  function () {
    $(this).find('li').click(function () {
      $('.unselected').removeClass('unselected');
      $(this).siblings('li').addClass('unselected');
      var index = $(this).index();
      $('select option:selected').removeAttr('selected');
      $('select[name=size]')
        .find('option:eq(' + index + ')')
        .attr('selected', true);
    });
  },
  function () {}
);</code>

Cara Ia Berfungsi:

1. Pada mulanya, semua elemen pilihan dalam ul disembunyikan dengan menambahkan kelas yang tidak dipilih.
2. Apabila pengguna melayang di atas ul, acara hover() dicetuskan, menyebabkan semua item senarai kecuali yang pertama (iaitu paparan pilihan yang dipilih) kelihatan.
3. Mengklik pada mana-mana item senarai menogol item yang tidak dipilih. kelas, menyembunyikan semua pilihan lain dan mendedahkan pilihan yang diklik seperti yang dipilih.
4. Kaedah indeks() digunakan untuk menentukan indeks pilihan yang diklik, yang kemudiannya digunakan untuk mengemas kini pilihan yang dipilih dalam

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pilihan Kotak Pilihan HTML Muncul di Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!