Modifier couleur d'un menu au hover d'un sous-menu

24 Nov 2017 à 10:08

Bonjour à tous !

J'aimerai modifier la couleur d'un menu lorsque je passe la souris sur un de ses sous-menus. Illustration :

Lorsque la souris est sur le menu "Nos concepts" il est vert, parfait !
https://dsc.cloud/martinbouillaud/Screen-Shot-2017-11-24-10-06-18/Screen-Shot-2017-11-24-10-06-18.png

Mais lorsque la souris passe sur les sous-menus, la couleur de "Nos concepts" passe au rose .. :
https://dsc.cloud/martinbouillaud/Screen-Shot-2017-11-24-10-07-30/Screen-Shot-2017-11-24-10-07-30.png

J'aimerai également, que si on est sur une des deux pages du sous menu, le menu nos concepts soit en vert.

Quelqu'un aurait une idée ?

Merci d'avance !

Olivier C

24 Nov 2017 à 11:00

martinbouillaud a écrit :
Mais lorsque la souris passe sur les sous-menus, la couleur de "Nos concepts" passe au rose...

Bonjour. C'est parce qu'un :hover est déjà définit sur cet élément, ou par défaut sur tous les éléments. Si vous voulez faire passer votre couleur il faut sursélectionner votre élément.

Exemple :

:root .monElement { /* ici sursélection avec la pseudo-classe ":root", on peut aussi mettre "html", etc */
    color: Green;
}

Modifié par Olivier C (24 Nov 2017 - 11:00)

Zelalsan

24 Nov 2017 à 16:21

En fait sans code, difficile de dire vraiment ce qu'il se passe mais en temps normal, si tu appliques le hover sur le parent contenant le sous menu, tu n'auras pas ce problème.
Voici un exemple très simple.

Pour la seconde partie de ta question, tu peux soit construire le menu de manière dynamique en PHP pour pouvoir récupérer la page courante et agir en conséquent, soit le faire en JS avec le même principe.

CSS et mise en forme, CSS3

Modifier couleur d'un menu au hover d'un sous-menu