Maison >interface Web >tutoriel CSS >Comment faire pour qu'un élément masqué change sa couleur d'arrière-plan lorsque je survole son élément parent ?

Comment faire pour qu'un élément masqué change sa couleur d'arrière-plan lorsque je survole son élément parent ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-22 03:04:15651parcourir

How do I make a hidden element change its background color when hovering over its parent element?

Manipulation d'éléments en survol avec CSS

Dans le but de créer un élément interactif, vous avez rencontré des difficultés à comprendre les effets de survol CSS. Concrètement, vous souhaiteriez afficher des informations supplémentaires lors du survol d'un élément spécifique, mais le code fourni semble inefficace.

Pour résoudre ce problème, rappelez-vous qu'en CSS, vous ne pouvez implémenter des effets de survol que sur les éléments. qui sont les descendants directs de l'élément sur lequel vous survolez.

Considérez le code suivant :

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

a:hover > #hidden {
  background-color: orange;
  color: orange;
}

Dans cet extrait, le div caché est directement imbriqué dans l'élément survolé (la balise d'ancrage avec le texte "Cheetah"). Cette modification garantit que lorsque vous survolez la balise d'ancrage, les propriétés du div caché sont modifiées.

Une démonstration en direct de ce code peut être trouvée à cette URL : http://jsfiddle.net/LgKkU/

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