11548 sujets

JavaScript, DOM et API Web HTML5

Pseudo classe et attribut style dans une balise

Bonjour,

Je réalise actuellement une petite appli html et je viens de constater un comportement gênant sans savoir si celui-ci est normal ou non.
J'ai donc un menu dont voici le code html:
<ul id ="menu">
<li><a href="#">lien</a></li>
</ul>


Et le css:
#menu { 
	font-family: "CenturyGothic";
	list-style-type: none;
	position: absolute;
	top: 490px;
	left: 300px;
	}
#menu li {
		float: left;
	}
#menu a {  
	display: block;
	height: 20px;
	padding-left: 15px;
	color: #a9a7a5;
	text-decoration: none;
	}
#menu a:hover{  
	color: aqua; 
	}


La pseudo classe hover remplit parfaitement son role.

Via une interface en javascript je fais varier la couleur du lien, un attribut style est créé dans la balise a, le hover ne fonctionne plus, il n'y a plus de changement de couleur au survol.
Est-ce normal?
Peut-on remédier à ce problème?

Dans le même ordre d'idée j'ai remarqué que quand je met un gestionnaire d'événement en DOM 0 sur une balise p, la pseudo classe :active que j'applique à ce p ne fonctionne pas.
Par contre quand je met le même gestionnaire d'événement en DOM 2 ça fonctionne. Est-ce normal?

Merci d'avance
Modifié par moreall (02 May 2012 - 12:31)
En fait, après plusieurs tests, la pseudo classe hover fonctionne toujours mais la couleur qui y est définie n'est plus prise en compte dès lors qu'une nouvelle couleur a été définie en js dans l'attribut style du lien.
Quand je regarde avec firebug dans #menu a:hover la propriété color et sa valeur sont barrés.
Par-contre si je teste une autre propriété dans #menu a:hover elle continue à fonctionner même si je fais varier la valeur de color dans l'attribut style de la balise <a>.
Ceci est-il normal?
Bonjour à toutes et à tous,

si j'ai bien compris ton problème, c'est le code Javascript qui vient perturber le bon fonctionnement de ta page Web. Peux-tu nous donner le code Javascript, S'il te plait ?

@+
Le code Javascript sert juste a créer un attribut style dans la balise a.

Je constate que lorsque j'ai:
<a href="#">test</a>
la couleur définie au survol par l'intermédiaire de la pseudo classe :hover apparait bien au survol du lien.
Par contre, après modification via un colorpicker jquery, lorsque j'ai:
<a href="#" style="color: rgb(212, 203, 180);">test</a>
la couleur définie au survol n'apparait plus. Je n'ai pourtant pas modifié le a:hover.

Ce comportement est-il normal? Que puis-je faire pour le modifier?
Bonjour,
C'est normal, tu forces une valeur dans le code inline, c'est donc elle qui aura toujours la priorité par rapport aux autres.
Il faudrait voir à quel moment tu imposes cette couleur pour l'enlever dès qu'elle n'est plus nécessaire ou gérer directement le hover avec JavaScript
Bonjour,
la solution serait effectivement de gérer le hover par javascript, j'ai cherché à le faire mais je n'ai pas l'impression que ce soit possible...
Alors test donc ça...
<p onmouseover="alert('Coucou');">Passe moi dessus ! (Avec la souris, hein ?)</p>
Ok!!!
Donc si j'ai bien compris, quand je créé dans la balise <a> l'attribut style qui modifie la couleur, je créé en même temps un attribut onmouseover qui va reprendre la couleur définie dans le a:hover du fichier css.
Je teste ça tout de suite...
Il y a des moyens propres de faire en fonction du framework (si framework il y a) que tu utilises.
Et si tu modifies la couleur à l'entrée, il ne faut pas oublier de remettre la couleur d'origine en sortant avec onmouseout.
Exact!
Donc créer un attribut style + 1 attribut onmouseover et 1 attribut onmouseout qui reprend la valeur définie dans l'attribut style.
J'utilise un colorpicker jquery qui permet, à chaque modification de couleur de l'élément visé, d'assigner des actions (via une fonction onChange). Ça ne devrait donc pas poser trop de problèmes....
Bonjour !

Il serait plus simple d'ajouter une classe dans ton code JS au lieu de modifier l'attribut style.

Et ensuite, libre à toi de définir dans ton fichier CSS les propriétés associées à cette classe.
Sujet clos
Aller à