11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toutes et à tous,

Je viens vous voir pour tenter de résoudre mon problème, un peu casse-tête à mon goût.

Je dispose d'onglets.
Ces onglets, au survol de la souris, s'anime avec un cadre bleu (style css) :

#onnglet ul li:hover {
   border : 2px solid blue;
}

Jusque là tout va bien. Seulement, l'un des onglets dispose d'un sous-menu.
Le problème c'est que lorsque je rentre dans ce sous-menu, je sors de l'onglet, donc il n'y a plus le cadre de cet onglet, et cela m'embête car on ne sait plus à quel onglet appartient ce sous menu.
Je veux en fait, que l'onglet qui dispose du sous-menu, reste "animé".

Seulement c'est paradoxal de faire ça en JavaScript :
- Si je RENTRE dans ONGLET -> border : blue;
- Si je SORS d'ONGLET -> border : white;
- Si je RENTRE dans SOUS-MENU -> border:blue sur ONGLET
- Si je SORS de SOUS-MENU -> border: white sur ONGLET (sauf si je rerentre sur ONGLET)..

Voila merci de m'avoir lu et de m'apporter votre aide !

Nexi.
Modifié par Nexi (11 Apr 2014 - 09:10)
Stupid boy que je suis !

Je me cassais la tête en JavaScript, en me disant qu'en CSS on ne pouvait pas séléctionner le parent mais finalement c'est tout bête.
La réponse, si ca peut aider : On agit lorsqu'il rentre sur le li ET sur le sous-menu..juste en CSS !


#onglet ul li:hover, #onglet ul li ul:hover {
   border: 2px solid blue;
}

Modifié par Nexi (11 Apr 2014 - 09:13)