Bagaimana untuk Menjadikan Pilihan Kotak Pilihan HTML Kelihatan pada Hover?

Pilihan Kotak Pilih HTML Kelihatan pada Tuding

Pertanyaan ini membincangkan penciptaan kotak pilih di mana pilihan boleh dilihat pada tuding dan bukannya mengklik. Untuk mencapai kesan ini, anda boleh melaksanakan pendekatan berikut.

Manipulasi jQuery

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

$('#selectUl').hover(
  function() { // Mouseover event
    $(this).find('li').click(
      function() {
        $('.unselected').removeClass('unselected'); // Remove unselected styles

        $(this).siblings('li').addClass('unselected'); // Add unselected styles to other elements

        var index = $(this).index(); // Get the index of the clicked option
        $('select option:selected').removeAttr('selected'); // Deselect the previously chosen option

        $('select[name=size]')
          .find('option:eq(' + index + ')')
          .attr('selected', true); // Select the new option
      }
    );
  },
  function() { // Mouseout event
    // Hide unselected elements
  }
);</code>

Penggayaan CSS

Untuk menggayakan kotak pilihan, anda boleh menggunakan CSS berikut:

<code class="css">select {
  opacity: 0.5;
}
ul {
  width: 8em;
  line-height: 2em;
}

li {
  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>

Pendekatan Pemalam

Pendekatan alternatif ialah menggunakan pemalam mudah:

<code class="js">(function($) {
  $.fn.selectUl = function() {
    // ... code goes here ...
    return $(this);
  };
})(jQuery);

$('#sizes').selectUl();</code>

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