Comment styliser les éléments sélectionnés et survolés avec :after en CSS ?

Combiner :after avec :hover en CSS

CSS offre une combinaison puissante du pseudo-élément :after et du pseudo- :hover classe, permettant aux développeurs de créer des effets de style dynamiques. Cette question particulière consiste à appliquer le même style aux éléments lorsqu'ils sont tous deux sélectionnés et survolés.

Le code fourni montre une liste d'éléments, où l'élément sélectionné (avec la classe "sélectionné") affiche une flèche façonner en utilisant :after. Le défi réside dans la reproduction de ce comportement pour les éléments survolés.

La solution proposée dans la réponse est d'ajouter :after au sélecteur #alertlist li:hover de la même manière qu'il est utilisé avec #alertlist li.selected . Cela garantit que le même style est appliqué aux éléments sélectionnés et survolés.

Voici le code 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>

En implémentant ce changement, la forme de la flèche n'apparaîtra désormais pas uniquement pour les éléments sélectionnés. éléments mais également pour les éléments survolés, fournissant un repère visuel cohérent aux utilisateurs.

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!