简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Können Sie die Hintergrundfarbe von Auswahllistenoptionen beim Hover mit HTML und CSS ändern?

Mary-Kate Olsen
Freigeben： 2024-11-01 12:33:29
Original
822 Leute haben es durchsucht

Can You Change the Background Color of Select List Options on Hover with HTML and CSS?

Implementieren von Hover-aktivierten Hintergrundfarbänderungen für Auswahllistenoptionen in HTML

Wenn es um die Gestaltung von Auswahllistenoptionen geht, gibt es oft Probleme der Wunsch, ihr Erscheinungsbild anzupassen, einschließlich der Änderung ihrer Hintergrundfarbe beim Schweben. Die ursprüngliche Untersuchung konzentrierte sich auf diesen spezifischen Aspekt. Die bedauerliche Wahrheit ist jedoch, dass es nicht möglich ist, diesen Effekt allein mit HTML und CSS zu erzielen.

Trotz Versuchen mit CSS-Regeln wie „option :hover{background-color:red;}“ haben sie es getan als unwirksam erwiesen. Der Grund für diese Einschränkung liegt in der browsereigenen Rendering-Engine.

Alternative Lösungen

Da das Ändern der Hintergrundfarbe von Auswahllistenoptionen beim Hover nicht möglich ist Mit nativem HTML und CSS wandte sich das Gespräch alternativen Ansätzen zu. Ein Vorschlag bestand darin, externe Bibliotheken wie Chosen oder Select2 zu nutzen. Diese Bibliotheken bieten erweiterte Gestaltungsmöglichkeiten, die eine bessere Kontrolle über die Ästhetik ausgewählter Listenelemente ermöglichen.

Wenn die Verwendung von Bibliotheken von Drittanbietern nicht wünschenswert ist, wurde eine andere Option vorgestellt. Dabei wird anstelle der Auswahlliste eine ungeordnete Liste erstellt und deren Erscheinungsbild mit CSS manipuliert. Eine relevante Diskussion zu dieser Technik finden Sie in einem separaten Thread mit dem Titel „Wie konvertiere ich ein