Comment créer une info-bulle de fondu entrant/sortant pour un élément Div en utilisant HTML et CSS ?

Ajout d'une info-bulle de fondu entrant/sortant à un Div

Vous disposez d'un élément div avec une étiquette et un champ de saisie. Pour améliorer l'expérience utilisateur, vous souhaitez afficher une info-bulle au survol avec un effet de fondu entrant/sortant fluide. Ceci peut être réalisé en utilisant une combinaison de HTML et CSS.

Configuration de base des info-bulles

Commencez par ajouter un attribut de titre à l'élément div. Cet attribut contient le texte de l'info-bulle, tel que :

<div title="Enter your name here">
  <label>Name</label>
  <input type="text" />
</div>

Cela affichera une info-bulle par défaut au survol.

Implémentation de l'effet de fondu

Pour obtenir le fondu d'entrée/sortie effet, utilisez les transitions CSS :

/* Style the tooltip initially as invisible */
.tooltip {
  opacity: 0;
  transition: opacity 0.5s;
}

/* Style the tooltip on hover as visible with fade-in effect */
.tooltip:hover {
  opacity: 1;
}

Attribuez la classe tooltip à votre élément div pour les appliquer styles.

Exemple HTML et CSS

Voici l'exemple de code complet :

<div class="tooltip" title="Enter your name here">
  <label>Name</label>
  <input type="text" />
</div>

.tooltip {
  opacity: 0;
  transition: opacity 0.5s;
  height: 3em;
  width: 10em;
  background: yellow;
}

.tooltip:hover {
  opacity: 1;
}

Ce code ajoutera une info-bulle de fondu d'entrée/sortie à votre élément div , offrant une expérience utilisateur visuellement attrayante et informative.

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!