Comment modifier le contenu au survol à l'aide de CSS : pouvez-vous remplacer \'NEW\' par \'ADD\' à l'aide de la propriété `content` ?

Comment modifier le contenu en survol à l'aide de CSS : exploration de la propriété de contenu

Introduction

La modification du contenu en survol est une exigence courante dans le développement Web, permettant aux utilisateurs d'interagir avec des éléments en affichant des informations supplémentaires ou en modifiant le texte. CSS offre une solution puissante pour cela en utilisant la propriété content ainsi que les pseudo-éléments ::after et ::before.

Comprendre le problème :

L'objectif est de changez le contenu d'une étiquette de « NOUVEAU » à « AJOUTER » lorsque la souris la survole. Dans l'extrait de code donné, le développeur a tenté d'y parvenir en utilisant CSS uniquement, mais a rencontré des difficultés.

Explorer la solution :

La propriété CSS clé pour cette tâche est contenu. Il nous permet d'insérer ou de modifier le contenu d'un élément de manière dynamique. En utilisant le pseudo-élément ::after, nous pouvons ajouter un nouveau contenu après le contenu existant. Voici le CSS modifié :

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

Implémentation :

• L'état de survol est appliqué à l'élément '.item', déclenchant le changement de contenu lorsque le l'utilisateur passe la souris dessus.
• La propriété 'content' est définie sur 'ADD' dans le pseudo-élément ::after. Ceci insère le texte 'AJOUTER' après le contenu existant.

Exemple :

<code class="html"><div class="item">
  <a href="">
    <p class="label success new-label"><span class="align">New</span></p>
  </a>
</div></code>

Conclusion :

En combinant la propriété content avec ::after, nous pouvons effectivement modifier le contenu d'un élément au survol. Cette technique polyvalente permet aux développeurs de créer des interfaces utilisateur interactives et réactives sans recourir à JavaScript ou à d'autres méthodes de script.

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!