Wie werden HTML-Auswahlfeldoptionen beim Hover angezeigt?

So zeigen Sie HTML-Auswahlfeldoptionen beim Hover an

Die von Ihnen vorgestellte Herausforderung besteht darin, ein Auswahlfeld zu erstellen, in dem die Optionen bis zum Benutzer verborgen bleiben schwebt darüber. Hier ist eine detaillierte Lösung:

Implementierung:

Der bereitgestellte Code nutzt das hover()-Ereignis von jQuery, um die Sichtbarkeit der Listenelemente umzuschalten. Die nicht ausgewählte CSS-Klasse wird zum Formatieren von Listenelementen verwendet, die derzeit nicht angezeigt werden.

HTML-Markup:

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

CSS-Stile:

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

JavaScript-Ereignisbehandlung:

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

So funktioniert es:

1. Zunächst werden alle Optionselemente in der ul ausgeblendet, indem die nicht ausgewählte Klasse hinzugefügt wird.
2. Wenn der Benutzer mit der Maus über die ul fährt, wird das Ereignis hover() ausgelöst, wodurch alle Listenelemente außer dem ersten (das ist die Anzeige der ausgewählten Option) sichtbar werden.
3. Ein Klick auf ein beliebiges Listenelement schaltet die nicht ausgewählten Elemente um Klasse, wobei alle anderen Optionen ausgeblendet und die angeklickte Option als ausgewählt angezeigt wird.
4. Die index()-Methode wird verwendet, um den Index der angeklickten Option zu bestimmen, der dann verwendet wird, um die ausgewählte Option in der

Das obige ist der detaillierte Inhalt vonWie werden HTML-Auswahlfeldoptionen beim Hover angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!