Comment puis-je styliser un élément enfant lorsque son parent est survolé ?

Style de l'élément enfant lors du survol du parent

Dans divers scénarios, il est souhaitable de modifier le style des éléments enfants lorsque les utilisateurs survolent leurs éléments parents . Ceci peut être réalisé principalement grâce à des solutions CSS, notamment en utilisant le sélecteur de pseudoclasse :hover.

Par exemple, si vous souhaitez changer la couleur d'une barre d'options dans un panneau lorsque l'utilisateur survole le panneau, CSS propose une approche simple :

.parent:hover .child {
  /* Style for child element on hover */
}

Cet extrait utilise la pseudoclasse :hover pour spécifier que les modifications de style ne doivent s'appliquer qu'aux éléments enfants (.child) lorsque leurs éléments parents (.parent) sont survolé. Le combinateur descendant (espace) nous permet de sélectionner n'importe quel descendant de l'élément parent qui correspond au sélecteur enfant.

Considérez cet exemple en direct :

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

Ce code modifie l'arrière-plan colore, transforme l'échelle et ajuste la bordure incrustée de l'élément enfant lorsque l'élément parent est survolé, démontrant l'efficacité du CSS dans ce contexte.

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!