Comment modifier le contenu en survol en utilisant uniquement CSS ?

Comment modifier le contenu en survol

Introduction

Les effets de survol sont une technique courante utilisée pour fournir des informations supplémentaires ou attirer l'attention sur un élément sur un page web. Cet article explore une méthode simple mais efficace pour modifier le contenu d'un élément lorsque le curseur de la souris le survole en utilisant uniquement CSS.

Énoncé du problème

L'objectif est de modifier le contenu du " NEW" à "ADD" lorsque le curseur de la souris le survole. Ceci doit être réalisé uniquement via CSS, sans utiliser JavaScript ni aucune bibliothèque supplémentaire.

Propriété de contenu CSS à la rescousse

La propriété de contenu CSS, introduite avec ::after et ::before pseudo- elements, fournit un moyen de modifier le contenu d’un élément. Utilisons cette propriété pour résoudre notre problème :

Solution

1. Masquer le contenu original au survol :

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

Cette règle utilise l'affichage : none pour masquer la propriété élément contenant le contenu "NOUVEAU" lorsque le curseur de la souris survole le .item.

2. Affichez le nouveau contenu en utilisant ::after:

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

Le pseudo- element ::after est utilisé pour insérer le contenu "ADD" après l'élément .new-label lorsqu'il est en survol. La propriété content spécifie le nouveau contenu.

Code mis à jour

<code class="css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.item {
  width: 30px;
}

a {
  text-decoration: none;
}

.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.label.success {
  background-color: #46a546;
}

.item a p.new-label span {
  position: relative;
  content: 'NEW';
}

.item:hover a p.new-label span {
  display: none;
}

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

Conclusion

En combinant la propriété content avec des effets de survol, nous avons réussi à implémenter une solution simple et élégante pour modifier le contenu en survol en utilisant du CSS pur. Cette technique est largement applicable et peut être utilisée pour améliorer les interactions des utilisateurs et fournir des informations supplémentaires de manière dynamique et visuellement attrayante.

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!