Comment manipuler le CSS de classes séparées avec :hover ?

Manipulation CSS de classes séparées avec :hover

Lorsque vous travaillez avec plusieurs classes en CSS, il peut être nécessaire de modifier le style de une classe basée sur l'état de survol d'un autre élément. Bien qu'il puisse sembler intuitif d'utiliser un sélecteur imbriqué comme .item:hover .wrapper, cela n'est pas directement possible.

Cependant, il existe deux approches viables pour obtenir cet effet :

• Relations entre frères et sœurs et enfants : Si l'élément cible (wrapper) est un enfant ou un élément frère immédiat de l'élément (élément) survolé, vous pouvez utiliser les sélecteurs ~ (frère) ou (frère immédiat). Par exemple :

.item:hover + .wrapper {
  background-color: red;
}

• Relations descendantes : Dans les cas où l'élément cible est un descendant de l'élément survolé, vous pouvez utiliser l'option > (descendant) dans la règle .item:hover. Par exemple :

.item:hover > .child > .wrapper {
  color: black;
}

N'oubliez pas que ces approches sont efficaces lorsque les éléments ciblés sont des frères et sœurs ou des descendants au sein de la structure HTML. Pour les éléments qui ne sont pas directement liés dans le DOM, vous devrez peut-être envisager des solutions alternatives telles que JavaScript.

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!