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

Style des éléments enfants lors du survol du parent

Besoin de modifier l'apparence d'un élément enfant lorsque vous survolez son parent ? Entrez le puissant sélecteur :hover de CSS.

Pour ce faire :

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

Avec ce sélecteur, vous ciblez l'élément enfant lorsque le parent, ".parent", est survolé. Le combinateur de descendants (espace) sélectionne les descendants correspondant à ".child".

Par exemple :

.parent:hover .child {
  background-color: #ccc;
}

Cela rend l'arrière-plan de l'élément enfant gris lorsque vous survolez le parent.

Exemple en direct :

<div class="parent">
  <p class="child">Hover me</p>
</div>

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

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background-color: #ccc;
  transform: scale(1.1);
}

Cet exemple change l'arrière-plan de l'élément enfant en gris et l'agrandit légèrement au survol du parent.

N'oubliez pas que la prise en charge de votre navigateur est couverte ici. Plongez dans CSS et améliorez votre expérience utilisateur !

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!