Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie wende ich :after Effects auf :hover-Elemente in CSS an?

Susan Sarandon
Freigeben: 2024-10-27 02:30:02
Original
487 Leute haben es durchsucht

How to Apply :after Effects to :hover Elements in CSS?

So kombinieren Sie :after und :hover effektiv

Bei Verwendung von CSS ist es möglich, die Pseudoselektoren :after und :hover zu kombinieren um dynamische Effekte zu erzeugen. Dies zu erreichen kann jedoch eine Herausforderung sein.

Bedenken Sie den bereitgestellten Code, bei dem eine Liste mit einer ausgewählten Klasse erweitert wird, die mithilfe von :after eine Pfeilform hinzufügt. Das Ziel besteht darin, die gleiche Pfeilform auf Elemente anzuwenden, über die der Mauszeiger bewegt wird.

#alertlist {
  list-style: none;
  width: 250px;
}

#alertlist li {
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}

#alertlist li.selected,
#alertlist li:hover {
  color: #f0f0f0;
  background-color: #303030;
}

#alertlist li.selected: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: "";
}
Nach dem Login kopieren

Um den :after-Effekt mit :hover zu kombinieren, hängen Sie einfach :after an den #alertlist li:hover-Selektor im an Dasselbe gilt für #alertlist li.selected:

#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: "";
}
Nach dem Login kopieren

Auf diese Weise wird die Pfeilform nun sowohl auf Listenelementen mit der ausgewählten Klasse als auch auf Elementen angezeigt, über die der Mauszeiger bewegt wird.

Das obige ist der detaillierte Inhalt vonWie wende ich :after Effects auf :hover-Elemente in CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!