Hier sind einige Titeloptionen, die sich auf die Frage der Kombination von „:after' und „:hover' konzentrieren: Option 1 (direkt und prägnant): * Wie erstelle ich einen schwebenden Pfeil mit :after und :hover in CSS? Option 2

Kombination von :after mit :hover

CSS bietet eine große Auswahl an Pseudo-Selektoren, die ein gezieltes Styling anhand verschiedener Kriterien ermöglichen. Ein solcher Selektor ist :after, mit dem Sie Elemente nach dem ausgewählten Element hinzufügen können. Ein weiterer häufig verwendeter Pseudoselektor ist :hover, der auf Elemente abzielt, wenn der Cursor über ihnen schwebt.

Die vorliegende Frage versucht, :after mit :hover zu kombinieren, um eine Pfeilform zu erstellen, die angezeigt wird, wenn ein Element eines von beiden ist ausgewählt ist oder mit der Maus darüber bewegt wird. Der in der Frage bereitgestellte Originalcode enthält:

<code class="css">#alertlist li.selected:after {
  ...
}</code>

der Stile auf Elemente mit der „ausgewählten“ Klasse anwendet. Um Hovering-Funktionalität hinzuzufügen, müssen wir eine ähnliche :after-Regel für Elemente einfügen, über die der Mauszeiger bewegt wird:

<code class="css">#alertlist li.selected:after, #alertlist li:hover:after {
  ...
}</code>

Durch das Hinzufügen von :after zum #alertlist li:hover-Selektor stellen wir sicher, dass die Stile angewendet werden Die ausgewählten Elemente werden auch auf Elemente angewendet, über die sich der Mauszeiger bewegt. Der vollständige Code sieht jetzt so aus:

<code class="css">#alertlist {
  ...
}

#alertlist li {
  ...
}

#alertlist li.selected,
#alertlist li:hover {
  ...
}

#alertlist li.selected:after, #alertlist li:hover:after {
  ...
}</code>

Jetzt erscheint die Pfeilform nicht nur auf Elementen mit der „ausgewählten“ Klasse, sondern auch auf Elementen, über die man mit der Maus fährt.

Das obige ist der detaillierte Inhalt vonHier sind einige Titeloptionen, die sich auf die Frage der Kombination von „:after' und „:hover' konzentrieren: Option 1 (direkt und prägnant): * Wie erstelle ich einen schwebenden Pfeil mit :after und :hover in CSS? Option 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!