Est-ce que :hover peut modifier les classes CSS externes ?

:hover peut-il modifier les classes CSS externes ?

En CSS, nous pouvons appliquer des modifications de style aux éléments en survol à l'aide du sélecteur :hover. Cependant, que se passe-t-il si l'on souhaite modifier le CSS d'un élément d'une classe différente lorsqu'un autre élément est survolé ?

Comme les sélecteurs CSS ciblent uniquement les éléments en fonction de leur hiérarchie ou de leurs relations au sein du DOM, il n'est pas possible de directement modifier le CSS d'un élément en dehors de la portée de l'élément de survol actuel.

Options de modifications indirectes

Cependant, il existe des approches indirectes pour obtenir des effets similaires :

• Relation Parent-Enfant : Si l'élément que vous souhaitez modifier (E) est un enfant de l'élément survolé (F), vous pouvez utiliser le sélecteur :hover sur F pour cibler E .

.item:hover .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' is hovered */
}

• Relation fraternelle : Si E est un frère ou une sœur de F (ou un descendant d'un des frères et sœurs de F), vous pouvez utiliser le combinateur ~ sibling en CSS.

.item:hover ~ .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}

Solution JavaScript

Si les solutions CSS ne sont pas réalisables, vous pouvez utiliser JavaScript pour manipuler les propriétés CSS de E en fonction du état de survol de F.

<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
  document.querySelector('.wrapper').style.backgroundColor = 'red';
});

document.querySelector('.item').addEventListener('mouseleave', () => {
  document.querySelector('.wrapper').style.backgroundColor = '';
});</code>

Conclusion

Bien que les sélecteurs CSS à eux seuls ne puissent pas modifier directement les classes externes, la relation parent-enfant ou frère/sœur et JavaScript fournissent des solutions indirectes pour obtenir des effets similaires.

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!