Maison > interface Web > tutoriel CSS > le corps du texte

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

Linda Hamilton
Libérer: 2024-11-07 07:00:03
original
900 Les gens l'ont consulté

How to Display Text on Image Hover Using CSS and 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>
Copier après la connexion
Copier après la connexion
#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}
Copier après la connexion

jQuery

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

<div>
Copier après la connexion
Copier après la connexion
#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}
Copier après la connexion
$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal