Maison >interface Web >tutoriel CSS >Comment puis-je afficher du texte au survol d'une image sans utiliser d'info-bulles ?

Comment puis-je afficher du texte au survol d'une image sans utiliser d'info-bulles ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-08 08:46:02467parcourir

How Can I Display Text on Image Hover Without Using Tooltips?

Affichage du texte au survol d'une image sans info-bulles

Dans la conception Web, il est souvent souhaitable d'afficher des informations supplémentaires lorsque l'utilisateur survole une image. Bien que les info-bulles soient une solution populaire, elles ne fournissent pas toujours l’esthétique ou la fonctionnalité souhaitée. Cet article explique comment obtenir cet effet en utilisant du CSS pur ou jQuery.

Utilisation de CSS :

CSS3 introduit le pseudo-élément :hover, qui permet de styliser lorsque la souris survole sur un élément. Dans ce cas, l'effet de survol sera appliqué à l'image.

HTML:

<div>

CSS:

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

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

Ce CSS place la légende du texte dans le coin inférieur gauche de l'image et la cache jusqu'à ce que la souris survole le image.

Utilisation de jQuery :

jQuery peut également être utilisé pour obtenir le même effet. Cette méthode peut offrir plus de flexibilité pour des scénarios plus complexes.

HTML :

Identique à avant.

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");
});

Ce script jQuery lie les événements de survol et de sortie de souris à l'élément d'image et bascule la visibilité de la légende.

Quelle que soit la méthode utilisée, par en utilisant CSS ou jQuery, il est possible de créer un effet de survol personnalisé qui affiche des informations supplémentaires sur une image sans utiliser d'info-bulles.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn