Wie gestalte ich einen Pfeilindikator für ausgewählte und schwebende Listenelemente?

Gestaltung einer Pfeilanzeige mit kombiniertem :after und :hover

Sie möchten :after mit :hover kombinieren, um eine Pfeilanzeige für zu erstellen ein Listenelement. Wenn ein Element ausgewählt oder mit der Maus darüber bewegt wird, sollte dieser Pfeil erscheinen.

In Ihrem bereitgestellten Code haben Sie die Pfeilanzeige für ausgewählte Elemente mithilfe von :after korrekt formatiert. Um den gleichen Stil auf schwebende Elemente anzuwenden, hängen Sie einfach :after an den :hover-Selektor an.

Hier ist das aktualisierte CSS:

<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>

Dieser geänderte Code stellt sicher, dass die Pfeilanzeige beide angezeigt wird für ausgewählte und schwebende Listenelemente, wie vorgesehen.

Das obige ist der detaillierte Inhalt vonWie gestalte ich einen Pfeilindikator für ausgewählte und schwebende Listenelemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!