Comment afficher du texte sur une image avec la souris avec CSS et jQuery ?

Texte au survol de la souris sur l'image

Les utilisateurs rencontrent souvent des difficultés lorsqu'ils tentent d'afficher du texte sur une image lors du survol de la souris. Les techniques conventionnelles d’info-bulles ne correspondent pas toujours aux exigences esthétiques ou d’accessibilité souhaitées. Cet article explore les approches basées sur CSS et jQuery pour obtenir une solution élégante et efficace.

Approche CSS

Exploitant la puissance du pseudo-élément :hover dans CSS3, nous peut obtenir l'effet souhaité sans aucune connaissance de JavaScript. La structure HTML nécessite un div wrapper qui englobe à la fois l'image et le texte. Les règles CSS positionnent l'élément texte sous l'image, initialement masqué avec visibilité:hidden. Au survol de l'image (class="hover"), le texte devient visible (visibility:visible).

HTML:

<div>

CSS :

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}

jQuery Approche

Pour ceux qui maîtrisent jQuery, une méthode alternative existe. Dans cette approche, jQuery contrôle la visibilité de l'élément de texte au survol et au retrait de la souris. événements.

HTML :

<div>

CSS :

#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

jQuery :

$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});

Conclusion

Les deux CSS et jQuery fournissent des solutions viables pour afficher du texte au survol d’une image. Le choix entre les méthodes dépend des préférences personnelles et des compétences techniques. En tirant parti de ces techniques, les développeurs peuvent améliorer l'expérience utilisateur et créer des interactions esthétiquement agréables.

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!