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

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: "";
}

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: "";
}

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!