[Résolu] Propriété Javascript ou / Css

Bonjour a tous en espérant que quelqu'un peut m'éclaircir sur le sujet ^^'

J'ai fais un menu de Navigation, avec plusieurs catégories. J'ai mis une propriété .active sur un " li a " pour que la catégorie " Acceuil " sois toujours en background Vert.
Et les autres " li a " j'ai ajouté une propriété " :hover " lorsque je survole cette catégorie elle ne sois plus sur un fond blanc mais vert. Bref tout ca marche.

Cependant, ce que je voudrais faire c'est en gros :

If " li a:hover " --> " li a.active" = bacground-color: #fff; color: #666;

voila mon code css de base :

#menu li a{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menu li a:hover:not(.active){
background-color: #4CAF50 /*#f3f3f3*/;
color: white;
}
}
#menu li a.active{
background-color: #4CAF50;
color: white; 
}

C'était savoir si ce que je veux faire, est possible en " css " ou il faut faire du Javascript, si c'est du Java pourriez vous éventuellement m'éclaircir sur le code, je débute vraiment le Java et j'ai beaucoup de mal encore...

Merci a celui ou a ceux qui pourront m'aider !

Golderen

Bonjour et bienvenue sur le forum,

Si j'ai bien compris (ce dont je ne suis pas sûr), c'est en gros au survol de ton "li a.active", le rendu doit être le même que sur tes autres "li a" sans le survol !?

Si c'est ça, tu peux simplement associer ta classe et le :hover :

#menu li a.active,
#menu li a:hover {
  background-color: #4CAF50;
  color: white; 
}
#menu li a.active:hover {
  background-color: #fff;
  color: #666;
}

Modifié par SolidSnake (21 Jan 2016 - 11:51)

Merci de t'as réponse et de ton accueil, je me suis peut être mal expliquer en effet ^^'

En faite c'est que de base mon item " Active " est en fond vert permanent,
et ce que je voudrais c'est lorsque je survol un autre item, celui ci passe en vert mais enlève la propriété " fond vert " et la remplace par " fond blanc " de l'item " Active ". Sans survolé l'item " Active "

Je pense que sa doit être plus claire comme sa, désolé pour l'explication confuse ^^"
Modifié par Golderen (21 Jan 2016 - 11:54)

Bonjour Raphael, je sais déjà comment faire un objet actif en fonction de quel page ou on est, mais le problème n'étant pas de ce genre ^^

L'item " Accueil " est toujours sélectionner juste pour le design car il est le plus a Gauche.

C'est juste que une fois justement que je vais sur un autre lien l'item " Accueil " deviennent comme les autres a la bases " Blanc ici avec une écriture grise " pour donné son attribut " couleur verte écriture blanche " a l'item qui est survolé. ^^

En tout cas merci quand même pour le tuto, je le garde sous le coude
Modifié par Golderen (21 Jan 2016 - 14:02)

Bonjour,

Golderen a écrit :
Mais juste une petite dernière question est ce que tu pourrais m'éclaircir un peux sur le code en JS ? ^^"

En jQuery, ça donnerait un truc du genre :

$('#menu li a').not('.active')
  .mouseenter(function(){
    $('#menu .active').addClass('inactive').removeClass('active')
  })
  .mouseleave(function(){
    $('#menu .inactive').addClass('active').removeClass('inactive')
  })

Ok, merci beaucoup pour vos réponses