28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

C'est mon premier message et j'espère être clair dans sa formulation !

J'ai l'habitude de faire des menus où les liens se mettent en surbrillance lors du passage de la souris. J'utilise bien entendu un simple :hover pour cela.

Mais la plupart du temps, lorsqu'on navigue dans un menu, on est déjà sur une des options. Et pour indiquer où on est, cette option apparaît également en surbrillance.

Ce qui fait que lorsque l'on survole le menu, deux options sont en surbrillance : celle initiale, et celle survolée.

Il y a-t-il un moyen simple (et sans javascript) pour que l'option initiale ne soit plus en surbrillance lorsque l'on survole une autre option du menu ?

Par ailleurs, si cela peut être utile, je signale que les items du menus ne renvoient pas forcément à des pages et des URL, notamment lorsqu'il s'agit de menus à plusieurs niveaux hiérarchiques.

Merci beaucoup pour votre aide !

Bien à vous,

PM
pianomambo a écrit :
Il y a-t-il un moyen simple (et sans javascript) pour que l'option initiale ne soit plus en surbrillance lorsque l'on survole une autre option du menu ?

Bonjour et bienvenue. Admettons que l'onglet courant comporte la classe "active", l'onglet devra hériter de son menu parent en hover :
.nav:hover .active { // si élément parent survolé alors élément enfant .active change de couleur
 background: UneCouleur;
}

Et en admettant que les onglets soient dans une liste, des liens ou des spans, le sélecteur pourrait être :
.nav li *

Une démonstration en ligne : CodePen
Modifié par Olivier C (07 Feb 2016 - 07:11)
salut,
dans la même logique qu'évoquée, lorsque tu appliques les styles initiaux à tes liens, tu indiques également que cela doit être l'état lors du survol du parent. Un petit exemple.
Chers Tous,

Merci beaucoup pour votre aide limpide !

Ainsi que vos exemples qui là aussi sont très éclairants !

Je marque le sujet comme résolu,

Bien à vous,

PM