Bonjour à tous,

Voilà mon soucis.

J'ai un header. Je voudrais que lorsque je le survol (il s'agrandît déjà), le "main" du reste de la page se voit appliquer un effet Blur (avec filtre).

Or, lorsque je Blur le "main" en permanence cela fonctionne très bien :

main {
      filter: blur(30px);
}

mais dès que j'écris

header:hover main {

      filter: blur(30px);

}

Alors là, rien ne se passe...

Merci d'avance si vous avez une idée. Et bonne journée

Basile

-
Edité par bazzgab 22 octobre 2024 à 17:47:56

Bonjour,

il faut indiquer que l'effet doit se dérouler sur un élément frère de l'élément survolé :

header:hover + main {
	filter: blur(30px);
}

Magnifique, merci infiniment.

A bientôt