호버에서 선택 목록 옵션의 배경색을 변경하는 방법은 무엇입니까?

마우스를 올리면 선택 목록 옵션 배경색 스타일링

HTML에서는 마우스를 올리면 선택 목록 옵션의 기본 배경색이 변경되지 않습니다. 그러나 일부 사용자는 상호 작용을 강화하기 위해 사용자 정의 배경색 변경을 원할 수도 있습니다.

이러한 원하는 동작을 달성하려면 현재 CSS 사양이 마우스 오버 시 옵션의 배경색 수정을 직접 지원하지 않는다는 점을 이해하는 것이 중요합니다. option:hover { background-color: yellow; 와 같은 CSS 선택기 규칙 }는 효과적이지 않습니다.

한 가지 잠재적인 해결책은 Chosen 또는 select2와 같은 타사 라이브러리를 활용하는 것입니다. 이러한 라이브러리는 호버링 가능한 옵션의 배경색을 사용자 정의하는 기능을 포함하여 포괄적인 스타일 옵션을 제공합니다. 그러나 이러한 라이브러리를 사용하면 외부 종속성이 발생합니다.

더 복잡하기는 하지만 대안적인 접근 방식은 jQuery 또는 유사한 JavaScript 라이브러리를 사용하여 선택 목록을 순서가 지정되지 않은 목록으로 변환하는 것입니다. 순서가 지정되지 않은 사용자 정의 목록을 생성하면 스타일을 완벽하게 제어할 수 있으므로 마우스를 올려 놓은 옵션의 배경색을 정의할 수 있습니다. 예는 다음과 같습니다.

<code class="html"><ul id="select-list">
  <li value="1">One</li>
  <li value="2">Two</li>
  <li value="3">Three</li>
</ul></code>

<code class="css">#select-list {
  list-style-type: none;
  padding: 0;
}

#select-list li:hover {
  background-color: yellow;
}</code>

<code class="javascript">$('#select-list').hover(function() {
  $(this).css('background-color', 'yellow');
}, function() {
  $(this).css('background-color', 'initial');
});</code>

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