Maison >interface Web >tutoriel CSS >Comment afficher des informations supplémentaires sur le survol d'un élément à l'aide de CSS ?

Comment afficher des informations supplémentaires sur le survol d'un élément à l'aide de CSS ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-16 01:02:03701parcourir

How to Display Additional Information on Element Hover Using CSS?

Comment mettre en surbrillance un élément au survol et afficher des informations supplémentaires

Vous êtes confronté à un problème où vous souhaitez afficher une liste déroulante -like lorsque vous survolez un élément spécifique, mais la méthode que vous avez fournie ne fonctionne pas comme prévu. Explorons une solution à ce problème.

Une approche consiste à utiliser CSS, mais uniquement si le div caché est un enfant direct de l'élément sur lequel vous survolez. Voici comment :

#cheetah {
  position: relative;
}

#hidden {
  position: absolute;
  display: none;
  background-color: black;
}

#cheetah:hover #hidden {
  display: block;
  background-color: orange;
}

Dans ce code, nous définissons la position du div "#cheetah" sur "relatif", ce qui permet aux éléments enfants d'être positionnés par rapport à lui. Ensuite, nous définissons la position du div « #hidden » sur « absolu » et son style d’affichage initial sur « aucun ». Lorsque vous survolez « #cheetah », nous utilisons le sélecteur « survol » pour changer le style d'affichage de « #hidden » en « bloquer » et mettre à jour sa couleur d'arrière-plan en orange.

N'oubliez pas que cette méthode ne fonctionne que si le div "#hidden" est un enfant direct de l'élément sur lequel vous survolez. Si tel est le cas, vous pouvez obtenir la fonctionnalité souhaitée en utilisant uniquement CSS. Sinon, vous devrez peut-être envisager d'autres approches, telles que l'utilisation de JavaScript, pour obtenir l'effet souhaité.

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