Wie formatiere ich sowohl ausgewählte als auch schwebende Elemente mit :after in CSS?

Kombination von :after mit :hover in CSS

CSS bietet eine leistungsstarke Kombination aus dem Pseudoelement :after und dem Pseudoelement :hover. Klasse, die es Entwicklern ermöglicht, dynamische Styling-Effekte zu erstellen. Bei dieser speziellen Frage geht es darum, den gleichen Stil auf Elemente anzuwenden, wenn sie ausgewählt und mit der Maus darüber bewegt werden.

Der bereitgestellte Code zeigt eine Liste von Elementen, in der das ausgewählte Element (mit der Klasse „ausgewählt“) einen Pfeil anzeigt Form mit :after. Die Herausforderung besteht darin, dieses Verhalten für Elemente zu reproduzieren, auf die sich der Mauszeiger bewegt.

Die in der Antwort vorgeschlagene Lösung besteht darin, :after auf die gleiche Weise an den #alertlist li:hover-Selektor anzuhängen, wie es mit #alertlist li.selected verwendet wird . Dadurch wird sichergestellt, dass der gleiche Stil sowohl auf ausgewählte als auch auf schwebende Elemente angewendet wird.

Hier ist der aktualisierte Code:

<code class="css">#alertlist li.selected:after, #alertlist li:hover:after {
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}</code>

Durch die Implementierung dieser Änderung wird die Pfeilform jetzt nicht nur für ausgewählte angezeigt Elemente, aber auch für Elemente, über die man mit der Maus fährt, um den Benutzern einen konsistenten visuellen Hinweis zu bieten.

Das obige ist der detaillierte Inhalt vonWie formatiere ich sowohl ausgewählte als auch schwebende Elemente mit :after in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!