Comment faire apparaître les options de la zone de sélection HTML au survol ?

Comment afficher les options de la zone de sélection HTML au survol

Le défi que vous avez présenté consiste à créer une zone de sélection où les options sont masquées jusqu'à ce que l'utilisateur passe dessus. Voici une solution détaillée :

Implémentation :

Le code fourni utilise l'événement hover() de jQuery pour basculer la visibilité des éléments de la liste. La classe CSS non sélectionnée est utilisée pour styliser les éléments de liste qui ne sont pas actuellement affichés.

Marquage HTML :

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

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

Gestion des événements 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>

Comment ça marche :

1. Initialement, tous les éléments d'option de l'ul sont masqués en ajoutant la classe non sélectionnée.
2. Lorsque l'utilisateur survole l'ul, l'événement hover() est déclenché, ce qui fait que tous les éléments de la liste sauf le premier (qui est l'affichage de l'option sélectionnée) deviennent visibles.
3. Cliquer sur n'importe quel élément de la liste fait basculer l'élément non sélectionné. classe, masquant toutes les autres options et révélant l'option cliquée comme sélectionnée.
4. La méthode index() est utilisée pour déterminer l'index de l'option cliquée, qui est ensuite utilisée pour mettre à jour l'option sélectionnée dans le

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!