호버에 HTML 선택 상자 옵션을 표시하는 방법은 무엇입니까?

마우스를 올리면 HTML 선택 상자 옵션 표시

이 쿼리는 클릭하는 대신 마우스를 올리면 옵션이 표시되는 선택 상자 생성에 대해 설명합니다. 이 효과를 얻으려면 다음 접근 방식을 구현할 수 있습니다.

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>

CSS 스타일링

선택 상자의 스타일을 지정하려면 다음 CSS를 사용할 수 있습니다.

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

플러그인 접근 방식

대체 접근 방식은 간단한 플러그인을 사용하는 것입니다.

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

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

위 내용은 호버에 HTML 선택 상자 옵션을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!