Maison > interface Web > tutoriel CSS > Comment pouvez-vous styliser dynamiquement les éléments d'une liste en utilisant :after et :hover en CSS ?

Comment pouvez-vous styliser dynamiquement les éléments d'une liste en utilisant :after et :hover en CSS ?

Patricia Arquette
Libérer: 2024-10-27 12:31:02
original
401 Les gens l'ont consulté

How Can You Style List Items Dynamically Using :after and :hover in CSS?

Combiner :after et :hover pour un style de liste dynamique

En CSS, combiner des pseudo-éléments comme :after avec des états de survol peut améliorer le impact visuel des éléments de la liste. Supposons que vous ayez une liste dans laquelle les éléments sélectionnés affichent une forme de flèche en utilisant :after. Pour obtenir un effet similaire pour les éléments survolés, suivez ces étapes :

Le code CSS fourni définit une liste stylisée, avec un style par défaut pour tous les éléments de la liste (#alertlist li), un style modifié pour les éléments sélectionnés (#alertlist li.selected) et un style pour les éléments survolés (#alertlist li:hover).

Pour combiner :after avec le sélecteur :hover, ajoutez :after à #alertlist li:hover juste comme vous le faites avec #alertlist li.selected :

<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>
Copier après la connexion

En combinant le pseudo-élément :after avec les sélecteurs .selected et :hover, vous pouvez facilement appliquer la forme de la flèche à la liste sélectionnée et à la liste survolée. éléments, créant un repère visuel dynamique et engageant.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal