Comment styliser un indicateur fléché pour les éléments de liste sélectionnés et survolés ?

Style d'un indicateur de flèche avec :after et :hover combinés

Vous souhaitez combiner :after avec :hover pour créer une indication de flèche pour un élément de liste. Lorsqu'un élément est sélectionné ou survolé, cette flèche devrait apparaître.

Dans votre code fourni, vous avez correctement stylisé l'indicateur de flèche pour les éléments sélectionnés en utilisant :after. Pour appliquer le même style aux éléments survolés, ajoutez simplement :after au sélecteur :hover.

Voici le CSS mis à jour :

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

Ce code modifié garantit que l'indicateur de flèche est affiché à la fois pour les éléments de liste sélectionnés et survolés, comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!