Comment puis-je styliser les éléments enfants lorsque leur parent est survolé à l'aide de CSS ?

Ciblage des éléments enfants lors du survol parent

Question :

Comment pouvons-nous modifier le style d'un élément enfant lorsque le l'élément parent est-il survolé, de préférence en utilisant CSS ? Est-ce réalisable avec les sélecteurs :hover ?

Réponse :

Oui, CSS fournit une solution simple pour cette exigence. En utilisant la pseudoclasse :hover et le combinateur descendant, nous pouvons cibler spécifiquement les éléments enfants au sein des éléments parents survolés.

.parent:hover .child {
   /* ... */
}

Dans cette règle, la pseudoclasse :hover s'applique à l'élément .parent lorsque le curseur survole au-dessus. Le combinateur descendant (espace) sélectionne ensuite tout élément descendant qui correspond à la classe .child. Cela nous permet de modifier le style de l'élément enfant en réponse au survol de l'élément parent.

De plus, les navigateurs modernes prennent en charge un large éventail de propriétés CSS qui peuvent être modifiées pour l'élément enfant, notamment la couleur, police, arrière-plan et transitions. Voici un exemple pour illustrer le concept :

.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;
}

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

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!