[Résolu] Dysfonctionnement CSS avec Javascript

Bonjour bonjour,

J'ai un p'tit soucis avec un menu sur lequel j'ai mis un effet de hover en CSS :

#partie-gauche ul li:hover {
	cursor: pointer;
	color: #c90002;
	font-size: 20px;
}

Jusque là, tout va bien !

Ensuite, lorsqu'un des boutons de mon menu est sélectionné, je change la couleur et la taille de la police en Javascript :

bouton.style.color = 'black';
bouton.style.fontSize = '19px';

Pour cette partie aussi, aucun soucis.

Le problème intervient une fois qu'un bouton a été sélectionné puis désélectionné, l'effet de hover en CSS ne fonctionne plus. J'ai retourné le soucis dans tous les sens, je ne vois absolument pas d'où ça pourrait provenir...

Je suis débutant en Javascript donc je me dis que ce n'est peut-être pas grand chose et que l'un d'entre vous me trouvera une solution "logique" !

Merci d'avance !
Modifié par j0r (11 Dec 2012 - 15:37)

Bonjour,
En modifiant les styles avec javascript, cela rajoute des attributs "style" dans le code html, qui sont prioritaires sur les classes css. Cela doit expliquer que ta css n'est plus pris en compte.

Le mieux (et le plus propre) serait d'ajouter/retirer une classe css avec ton javascript, plutot que des styles, tu pourrait alors la gérer dans ta css.
Ou alors tu peut utiliser des !important dans ta css, mais ce n'est pas idéal..

Romain.E a écrit :
Bonjour,
En modifiant les styles avec javascript, cela rajoute des attributs "style" dans le code html, qui sont prioritaires sur les classes css. Cela doit expliquer que ta css n'est plus pris en compte.

Le mieux (et le plus propre) serait d'ajouter/retirer une classe css avec ton javascript, plutot que des styles, tu pourrait alors la gérer dans ta css.
Ou alors tu peut utiliser des !important dans ta css, mais ce n'est pas idéal..

Merci beaucoup de ta réponse, c'est ce que j'avais essayé de faire au début mais ça ne fonctionnait pas.

J'ai suivi ton conseil et j'ai créé deux classes CSS :

.bouton-normal {
	color: black;
	font-size: 19px;
}

.bouton-selectionne {
	color: #c90002;
	font-size: 20px;
}

Et dans mon Javascript, je fais appel à l'une ou l'autre en fonction si il est sélectionné ou pas :

bouton.className = 'bouton-normal';

ou

bouton.className = 'bouton-selectionne';

Le soucis, c'est que ça change bien la taille mais pas la couleur...

Si vous avez une solution, je suis preneur, merci !

Salut,

mis nous tout le css du menu, et désignes tes classes relatives au problème, je crois que tu as déjà mis une arborescence css plus forte que tes classes.

unami a écrit :
Salut,

mis nous tout le css du menu, et désignes tes classes relatives au problème, je crois que tu as déjà mis une arborescence css plus forte que tes classes.

J'ai résolu le soucis, tu as effectivement raison, j'avais un changement de couleur dans une autre classe, du coup ça faisait conflit, je te remercie !

En revanche, j'ai un autre petit soucis. Lorsqu'on arrive sur la page, le premier bouton du menu est sélectionné par défaut. Le problème, c'est que je le fais un peu "à l'arrache" dans le HTML avec ça :

style="color:#c90002; font-size:20px;"

(Oui je sais, ce n'est pas bien mais c'était en attendant)

Ma question est la suivante : comment faire en sorte (je suppose en Javascript) que lorsqu'un arrive sur la page, ce soit le premier bouton qui est sélectionné s'il vous plaît ?

Merci !

Salut

Ben tu n'as qu'à mettre ta classe "bouton-selectionne" dans le html au lieu du style, c'est la meilleur et la plus simple façon pour le faire, à moins que je n'aie pas bien compris ta question.

unami a écrit :
Salut

Ben tu n'as qu'à mettre ta classe "bouton-selectionne" dans le html au lieu du style, c'est la meilleur et la plus simple façon pour le faire, à moins que je n'aie pas bien compris ta question.

Effectivement, c'était juste ça... Merci beaucoup !