[Résolu] Modifier background-color derrière une image

Bonjour,

Comment s'y prendre pour changer la couleur d'arrière-plan d'un div quand on le survole quand celui-ci est lui-même derrière un div contenant une image en arrière-plan ?
En effet pour le moment mon div située en-dessous ne perçoit pas le passage de la souris...

voici le code :
https://codepen.io/mscou/pen/povXoPm

l'image est dans le div boussole-img-content, mais je souhaite modifier à l'aide d'un hover les arrière-plans de img-nord, img-ouest etc...

Merci d'avance

Bonjour,

Peux tu nous donner des précisions ? Si je résume tu souhaites modifier les arrière-plans de img-nord/ouest/etc.. lors du hover sur .boussole-img-content est-ce bien cela ?

Hello,
Si j'ai bien compris la demande, tu peux simplement faire :

.est:hover ~ .boussole-img .img-est{
  background: chocolate
}

En gros, lorsque tu survoles par exemple `.est` ? tu vas voir les class suivantes (avec tild ~) du même niveau qui s'appellent `boussole-img` (dans ce cas-ci, une seule possibilité mais c'est la seule manière de sélectionner un élément du même niveau plus loin dans le DOM) et puis tu associes le div .img-est à l'intérieur.

C'est ça, mais justement comme le div contenant l'image est situé devant le div contenant la couleur, le :hover ne fonctionne pas.
En fait je voudrais que la couleur de fond change quand je passe au-dessus du .img-est par exemple, mais cela ne fonctionne pas car .boussole-img-content est placé devant...

Friesstyle a écrit :
Bonjour,

Peux tu nous donner des précisions ? Si je résume tu souhaites modifier les arrière-plans de img-nord/ouest/etc.. lors du hover sur .boussole-img-content est-ce bien cela ?

Voilà, je souhaite modifier la couleur du .img-nord/ouest/etc.. quand je passe dessus, même si .boussole-img-content est placé devant...

Par exemple en passant devant .img-nord, seul la partie nord-ouest / nord-est de la boussole change de couleur.

Exactement cela, merci !