Wie kann ich die Hervorhebung ausgewählter Listenoptionen beim Hover anpassen?

Markierung ausgewählter Listenoptionen beim Hover ändern

Das Anpassen des Erscheinungsbilds ausgewählter Listenoptionen beim Hover kann die Benutzererfahrung verbessern. Eine häufige Anfrage besteht darin, die Standardhintergrundfarbe zu ändern, wenn der Mauszeiger über eine Option bewegt wird. Leider gelingt dies mit der CSS-Regel „option:hover {background-color: red; }“ nicht.

Lösung:

Um dieses Problem zu beheben, verwenden Sie eine Inset-Box-Schatten:

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

In diesem Beispiel wird die Klasse „dekoriert“ auf das Auswahlfeld angewendet. Wenn Sie mit der Maus über eine Option in diesem dekorierten Auswahlfeld fahren, wird ein eingefügter Feldschatten mit der Farbe #1882A8 angewendet, wodurch die gewünschte Änderung der Hintergrundfarbe entsteht. Diese Technik überschreibt effektiv die Standardhervorhebung und bietet eine besser anpassbare Benutzeroberfläche.

Das obige ist der detaillierte Inhalt vonWie kann ich die Hervorhebung ausgewählter Listenoptionen beim Hover anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!