Pseudo-classes CSS 3 & Javascript

Bonjour à tous, je suis nouveau.

J'avoue ne pas avoir cherché longtemps sur le forum si le topic et la réponse à ma question existaient déjà.

Je ne sais pas si je suis au bon endroit pour poser la question non plus.

Anyway...

Ceci est un exemple d'où les xxx et autres yyy...

J'ai un élément html type <table id="elem"><tr><td onclick="exemple(this)"></td><td></td></tr></table>

Auquel j'associe la propriété suivante aux enfants td:

#elem td:hover{
background-color: xxx;
border-style: xxx;
...
color: red;
}

Par l'intermédiaire d'un script Javascript je souhaite changer certaines propriétés des td

function exemple (var) {

if(la td qui appel exemple){
recupérationdel'élement.style.color: blue;
recupérationdel'élement.style.backgroundColor: yyy;
}
else(les autres td){
recupérationdel'élement.style.color: red;
recupérationdel'élement.style.backgroundColor: xxx;
}
}

Voilà en espérant que c'est clair pour le script...

Mon problème est le suivant:

Quand je clique sur une des cellules (td), les modifications de style sont effectuées a priori correctement par le script exemple(), mais la td "perd" alors sa propriété hover, du moins celle-ci n'est plus appliquée...

Quelqu'un a-t-til déjà été confronté à ce cas ?

Quelqu'un a-t-il une explication ?

Quelqu'un a-t-il une solution ?

Je précise que j'ai testé ça en local sous IE10, FIREFOX 10 et Chrome dernière version

1heure plus tard j'ai trouvé ça:

http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript

En gros on modifie directement la feuille de style mais ça ne me satisfait pas du tout et comme le dit le mec qui l'a posté "its quite annoying" et "troublesome"

Du coup je pense que je vais laisser tomber le css hover (pour ce cas) et que je vais passer par onmouseover et onmouseout qui est a priori la meilleure solution

PS: Peut-être que jQuery est plus adapté à ce genre de situation mais je n'utilise pas cette API
Modifié par taerg (08 Jul 2013 - 22:53)

Super...

Je n'ai pas testé encore mais je crois que y'a moyen de gérer ce genre de problème avec querySelector()

http://www.alsacreations.com/article/lire/1445-dom-queryselector-queryselectorall-selectors-api.html

salut,
si c'est sur les mêmes propriétés modifiées par JS que s'appliquent le hover, il ne prendront pas effet car la priorité des styles est donnée aux modifications faites par JS, vu qu'elle les ajoute avec l'attribut style. Donc ajouter "!important" dans ton CSS ex:

background: #000 !important;

Par contre ça reste du bricolage. Le mieux serait d'ajouter/enlever une classe à tes <td> et tu styles le tout via CSS en utilisant la calasse ajoutée.

Ok merci Zelalsan,

A vrai dire je n'utilise jamais !important et je ne m'étais jamais renseigné dessus...c'est chose faite !

Par contre j'ai vu que IE ignorait ce "hack".

Je ne savais pas non plus que le priorité était donnée au modifs JS, je comprend maintenant que c'est parce qu'elles sont ajoutées après le chargement du CSS et donc sont les dernières arrivées/premières exécutées.

La méthode que tu propose, changer les classes, semble efficace !

Thank you !!

De rien mais simple rectification, la priorité est donnée aux modifs JS pas parce qu'elle l'applique en dernier mais parce qu'elle applique les styles dans l'attribut "style" des balises et ce sont ces dernières qui ont la priorité sur tout (après "!important").

Ok, merci de m'avoir éclairé sur ce sujet j'y connaissais pas grand chose, j'ai trouvé ça:

http://openweb.eu.org/articles/cascade_css

qui explique ce que tu me disais sur les priorités.

T'as l'air plutôt bien calé sur le sujet en tout cas.

encore merci !