CSS peut-il modifier le style d'une classe en survolant une autre ?

Utiliser CSS pour modifier le style de classe en survol

Une seule règle CSS peut-elle être utilisée pour modifier les propriétés CSS d'une classe lors du survol un élément d'une classe distincte ? Est-il possible de créer une règle telle que :

.item:hover .wrapper { /*some css*/ }

où .wrapper n'est pas directement contenu dans .item, mais plutôt situé ailleurs dans le document ?

Solution CSS

Oui, cela est possible en utilisant les sélecteurs CSS. Vous pouvez adopter deux approches lorsque vous utilisez :hover pour modifier le style d'un autre élément :

1. Élément descendant ou enfant

Si .wrapper est un élément enfant de .item, vous pouvez utiliser ce sélecteur :

.item:hover .wrapper {
    /* CSS properties to change */
}

2. Élément frère

Si .wrapper est un élément frère de .item, apparaissant après .item dans le DOM, vous pouvez utiliser ce sélecteur :

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

Solution JavaScript

Bien que JavaScript ne soit pas nécessaire pour cette tâche simple, vous pouvez l'utiliser pour obtenir l'effet souhaité. Voici un exemple :

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

Informations supplémentaires

Il est important de noter que vos exemples d'éléments de menu semblent utiliser des classes distinctes. Au survol d'un élément, son sous-menu apparaît à droite en superposition. La classe contrôlant l’arrière-plan du sous-menu est nommée « wrapper ». Pour obtenir l'effet souhaité, utilisez l'approche de sélection de frères et sœurs décrite ci-dessus.

Références

• [Sélecteurs CSS 2.1](https://www.w3.org /TR/CSS21/selectors.html)

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!