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

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!