Comment puis-je utiliser CSS pour modifier dynamiquement le contenu lors du survol, créant ainsi une expérience interactive pour les utilisateurs ?

Modification du contenu au survol à l'aide de CSS

Dans le développement Web d'aujourd'hui, les modifications dynamiques apportées aux éléments de contenu ajoutent une touche d'interactivité et d'attrait. L'une de ces exigences courantes consiste à mettre à jour le contenu d'un élément lors du survol. Bien que cela puisse paraître trivial, CSS offre une solution élégante.

Utilisation de la propriété de contenu CSS

La propriété de contenu CSS, en conjonction avec les pseudo-éléments ::after et ::before, permet aux développeurs de pour modifier le contenu affiché. En utilisant ces éléments, nous pouvons créer un effet de survol transparent qui modifie le contenu d'un élément ciblé.

Modification des règles CSS pour l'état de survol

Pour obtenir l'effet de survol souhaité, nous ajoutons ce qui suit règle à notre CSS :

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

Cette règle demande au navigateur d'ajouter « ADD » au contenu de l'élément avec la classe « new-label » lorsqu'il entre dans un état de survol.

Exemple de mise en œuvre

Considérez l'exemple suivant :

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

<code class="css">.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>

Lorsque vous survolez l'étiquette « NOUVEAU », le contenu passe de manière transparente à « AJOUTER », créant un état de survol dynamique sans nécessitant des scripts supplémentaires.

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!