Maison > interface Web > tutoriel CSS > Comment puis-je modifier le style d'un élément enfant en survolant son élément parent à l'aide de CSS ?

Comment puis-je modifier le style d'un élément enfant en survolant son élément parent à l'aide de CSS ?

Patricia Arquette
Libérer: 2024-11-22 11:07:15
original
677 Les gens l'ont consulté

How Can I Change a Child Element's Style on Hovering Over Its Parent Element Using CSS?

Modification des éléments en survol à l'aide de CSS

Lorsque vous survolez un élément spécifique, vous souhaiterez peut-être apporter des modifications à un autre élément. Ceci peut être réalisé via CSS, mais seulement si l'élément masqué est un enfant de l'élément survolé.

Considérez l'exemple suivant :

<div>
Copier après la connexion

Pour changer la couleur d'arrière-plan du div caché lorsque vous survolez le div guépard, ajoutez le CSS suivant :

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

a {
  color: blue;
}

#hidden {
  background-color: black;
}

#cheetah:hover #hidden {
  background-color: orange;
  color: orange;
}
Copier après la connexion

En spécifiant #cheetah:hover #hidden, vous sélectionnons le div caché uniquement lorsque le div guépard est survolé. Cela vous permet de modifier son apparence sans affecter aucun autre élément.

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