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

호버에 HTML 선택 상자 옵션을 표시하는 방법

제시한 과제는 사용자가 옵션을 숨길 때까지 선택 상자를 만드는 것과 관련이 있습니다. 그 위에 맴돌고 있습니다. 자세한 해결책은 다음과 같습니다.

구현:

제공된 코드는 jQuery의 hover() 이벤트를 활용하여 목록 요소의 가시성을 전환합니다. 선택되지 않은 CSS 클래스는 현재 표시되지 않은 목록 항목의 스타일을 지정하는 데 사용됩니다.

HTML 마크업:

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

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>

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>

작동 방식:

1. 처음에는 선택되지 않은 클래스를 추가하면 ul의 모든 옵션 요소가 숨겨집니다.
2. 사용자가 ul 위로 마우스를 가져가면 hover() 이벤트가 트리거되어 첫 번째 항목(선택한 옵션 표시)을 제외한 모든 목록 항목이 표시됩니다.
3. 목록 항목을 클릭하면 선택되지 않은 항목이 토글됩니다. 클래스, 다른 모든 옵션을 숨기고 클릭한 옵션을 선택한 것으로 표시합니다.
4. index() 메서드는 클릭한 옵션의 인덱스를 결정하는 데 사용되며, 그런 다음

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