Comment afficher des informations supplémentaires sur le survol d'un élément à l'aide de 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!