Comment rendre les options de la zone de sélection HTML visibles au survol ?

Options de la zone de sélection HTML visibles au survol

Cette requête traite de la création d'une zone de sélection où les options sont visibles au survol au lieu de cliquer. Pour obtenir cet effet, vous pouvez implémenter l'approche suivante.

Manipulation 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>

Style CSS

Pour styliser la zone de sélection, vous pouvez utiliser le CSS suivant :

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

Approche du plug-in

Une approche alternative consiste à utiliser un simple plug-in :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!