Heim  >  Artikel  >  Web-Frontend  >  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

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-27 01:03:30965Durchsuche

Here are a few title options, focusing on the question of combining `:after` and `:hover`:

Option 1 (Direct & Concise):
* How to Create a Hovering Arrow using :after and :hover in CSS?

Option 2 (More Descriptive):
* Combining :after and :hover to Style

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn