Comment modifier dynamiquement le contenu en survol en utilisant uniquement CSS ?

Comment modifier le contenu au survol à l'aide de CSS

Pour modifier le contenu au survol en utilisant uniquement CSS, vous pouvez utiliser la propriété content avec les pseudo-éléments ::after ou ::before.

Dans l'exemple fourni, le but est de changer le texte "NEW" en "ADD" lorsque l'on survole l'élément. Pour y parvenir, ajoutez le CSS suivant :

<code class="css">.item:hover a p.new-label:after {
    content: 'ADD';
}</code>

Explication :

• .item:hover : Déclenche l'effet de survol sur l'élément item.
• a p.new-label : sélectionne le paragraphe avec la classe new-label à l'intérieur de la balise d'ancrage.
• :after : crée un pseudo-élément qui affichera le contenu après l'élément auquel il est attaché to.
• content: 'ADD' : Définit le contenu à afficher après le pseudo-élément.

Lorsque l'on survole l'élément, le pseudo-élément :after est déclenché , et le contenu est remplacé par "AJOUTER". Le texte original « NOUVEAU » est masqué à l'aide d'une autre règle CSS :

<code class="css">.item:hover a p.new-label span {
    display: none;
}</code>

Cette approche vous permet de modifier dynamiquement le contenu d'un élément au survol à l'aide de CSS sans recourir à JavaScript.

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!