Comment styliser les éléments enfants sur le survol du parent à l'aide de CSS ?

Effet de survol sur l'élément enfant à l'aide de CSS

Pour modifier le style d'un élément enfant lorsque son élément parent est survolé, vous pouvez utiliser la technique CSS suivante :

.parent:hover .child {}

Cette règle CSS utilise la pseudoclasse :hover pour cibler l'élément parent (".parent") dans un état survolé. Le combinateur descendant (espace) dans la règle sélectionne tout élément descendant qui correspond à la classe ".child".

En appliquant cette règle, vous pouvez modifier les propriétés de l'élément enfant en fonction du statut de survol du parent. élément. Par exemple, l'extrait de code suivant modifie la couleur d'arrière-plan de l'élément ".child" et l'agrandit lorsque son élément ".parent" est survolé :

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

Cette approche offre une compatibilité entre navigateurs et vous permet efficacement de styliser les éléments enfants en fonction des interactions avec leurs éléments parents.

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!