Wie ändere ich die Hintergrundfarbe von Auswahllistenoptionen beim Hover?

Hintergrundfarbe der Auswahllistenoption beim Hover gestalten

In HTML bleibt die Standardhintergrundfarbe der Auswahllistenoptionen beim Hover unverändert. Einige Benutzer wünschen sich jedoch möglicherweise eine benutzerdefinierte Änderung der Hintergrundfarbe, um die Interaktivität zu verbessern.

Um dieses gewünschte Verhalten zu erreichen, ist es wichtig zu verstehen, dass die aktuellen CSS-Spezifikationen keine direkte Unterstützung für die Änderung der Hintergrundfarbe der Option beim Hover bieten. CSS-Auswahlregeln wie option:hover { background-color: yellow; } sind unwirksam.

Eine mögliche Lösung besteht darin, Bibliotheken von Drittanbietern wie Chosen oder select2 zu verwenden. Diese Bibliotheken bieten umfassende Gestaltungsoptionen, einschließlich der Möglichkeit, die Hintergrundfarbe schwebender Optionen anzupassen. Die Verwendung dieser Bibliotheken führt jedoch zu einer externen Abhängigkeit.

Ein alternativer, wenn auch komplexerer Ansatz besteht darin, die Auswahlliste mithilfe von jQuery oder ähnlichen JavaScript-Bibliotheken in eine ungeordnete Liste umzuwandeln. Durch das Erstellen einer benutzerdefinierten ungeordneten Liste erhalten Sie vollständige Kontrolle über den Stil und können die Hintergrundfarbe der schwebenden Optionen definieren. Hier ein Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie ändere ich die Hintergrundfarbe von Auswahllistenoptionen beim Hover?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!