ホバー時に選択リストオプションの背景色を変更するにはどうすればよいですか?

ホバー時の選択リスト オプションの背景色のスタイリング

HTML では、選択リスト オプションのデフォルトの背景色はホバー時に変更されません。ただし、一部のユーザーは、インタラクティブ性を高めるためにカスタマイズされた背景色の変更を希望する場合があります。

この望ましい動作を実現するには、現在の CSS 仕様では、ホバー時のオプションの背景色の変更が直接サポートされていないことを理解することが重要です。 CSS セレクター ルール (option:hover {background-color: yellow; など)

考えられる解決策の 1 つは、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 中国語 Web サイトの他の関連記事を参照してください。