Comment afficher du texte sur le survol d'une image à l'aide de CSS et jQuery ?

Affichage du texte lors du survol d'une image

La création d'une petite boîte qui apparaît lorsqu'un utilisateur survole une image peut être réalisée par différentes méthodes. Voici un guide complet pour vous aider à obtenir l'effet souhaité :

CSS3 Utilisation du pseudo-élément :hover

En utilisant le pseudo-élément :hover en CSS3, vous pouvez afficher une boîte sur survol de l'image. Le code HTML et CSS de cette méthode est le suivant :

<div>

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

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

jQuery

Vous pouvez également utiliser jQuery pour obtenir le même résultat. Voici le code HTML, CSS et jQuery :

<div>

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

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

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

Ce code jQuery affichera l'élément "texte" lorsque la souris survole l'image et le masquera lorsque la souris partira.

Personnalisation de la boîte

Pour personnaliser la taille et la position de la boîte, vous pouvez ajuster les valeurs CSS fournies dans les propriétés bottom: et left:. Pour supprimer la connexion de bordure à l'image, ajoutez ce qui suit à votre CSS :

#wrapper img {
  border: none;
}

Plusieurs images et légendes

Si vous avez plusieurs images et légendes, vous peut créer un div wrapper pour chaque image et inclure les éléments d’image et de texte à l’intérieur. Copiez simplement le format indiqué dans l'extrait de code et remplacez la source de l'image et le texte en conséquence.

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!