Attributs CSS *-hover sans javascript

Bonjour à tous,

L'intitulé n'est pas forcément le plus adapté, mais il m'est difficile de trouver un nom correcte :aie:. Je vais vous détailler un petit problème que je n'arrive pas à résoudre.

Actuellement j'ai un tableau html dans lequel j'applique une fonction javascript qui vas ajouter les classes de JqueryUI selon son survol.

Un peu à la vas vite ça donne :

Code:

---

1 2 3 4 5 6

<table> <tr onmouseover="$(this).addClass('ui-state-hover');" onmouseout="$(this).removeClass('ui-state-hover');"> <td>Du texte trop beau</td> </tr> </table>

---

Donc désormais en fin de développement, j'aimerais pouvoir améliorer un peu le code. Du coup, lorsque j'ai vus que j'avais codé ça, j'ai tout de suite constaté que c'était très très très très très lourd :)

Du coup, je suis allé dans le CSS de JQueryUI ou j'ai pus customisé le code afin de faire exactement ce que je voulais.

Maintenant le gros problème c'est que si je met en place le themeswitcher de Jquery, cela ne vas pas reprendre les class que j'aurais crée (étant donné que tout est en fixe).

Ma question est donc la suivante.

Es-ce qu'il existe un moyen en Jquery de pouvoir affecter la class *-hover, *-active etc... à des éléments SANS avoir à utiliser de javascript ? (Donc que tout cela soit traité proprement par le CSS)

Merci d'avance pour vos lumières

Tidus

Citation:

---

Envoyé par tidus_6_9_2

Es-ce qu'il existe un moyen en Jquery de pouvoir affecter la class *-hover, *-active etc... à des éléments SANS avoir à utiliser de javascript ?

---

Jquery étant du javascript, j'aurais tendance à te répondre non. :lol:

En css tu peux utiliser les pseudo-classes, mais ça ne résoudra pas ton problème avec le thèmeswitcher.

Merci pour ta réponse Dabius, tout à fait... C'est ce que je me dis aussi, mais je ne sais pas si quelqu'un a déjà tenté l'exploit :)

Du coup, je pensais faire un autre truc, mais ça risque d'être assez lourd aussi... Je comptais créer mes classes perso en allant toujours demander quel est le style de la class ".ui-state-hover" et selon ces styles, créer ma classe perso...

Genre sur le document.ready faire quelque chose du genre :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

//Récupération des styles var back = $('.ui-state-default').css('background'); var col = $('.ui-state-default').css('color'); var backhover = $('.ui-state-hover').css('background'); var colhover = $('.ui-state-hover').css('color');   $("<style type='text/css'>"+ ".classPerso{ color:"+col+"; background:"+back+"}"+ ".classPerso:hover{ color:"+colhover +"; background:"+backhover +"}"+ "</style>").appendTo("head");

---

Bien sur c'est juste pour un seul style... Mais du coup ça voudrait dire que chaque fois j'aurais à recrée la class ce qui peut être tout aussi lourd je penses... Car en l’occurrence c'est juste une seule class que je crée, mais il pourrait y en avoir 200... Ce qui ne rend pas le code plus lisible ni plus léger...


Enfin voilà ^^ Merci pour ta réponse en tout cas :)

Il y a une chose que je comprends pas bien.

Ton thèmeswitcher c'est un switch entre les différents thème de jquery ?
Parce que si c'est le cas les noms de classe ne changent pas.

Oui tout à fait, mais moi ce que j'ai fait dans le fichier css de base de mon jquery c'est créer mes classes perso de cette façon :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* Change states ----------------------------------*/ .Lignes tbody tr{ border: 1px solid #bababa; font-weight: bold; color: #0073ea; cursor:pointer; height:35px; }   .Lignes tbody tr:hover{ border: 1px solid #0073ea; background: #0073ea url(images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; }   .Lignes tbody tr:active{ border: 1px solid #141414; background: #141414 url(images/ui-bg_highlight-soft_25_141414_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; }   .Lignes tbody tr:hover .ui-icon{ background-image: url(images/ui-icons_ffffff_256x240.png); }   .Lignes tbody tr:active .ui-icon{ background-image: url(images/ui-icons_ffffff_256x240.png); }

---

Ou en faite j'ai repris le style qu'avait les class .ui-state-hover, .ui-state-active, etc... et que j'ai copié/collé dans la class dont j'avais besoin.

Et du coup, cela fonctionne bien, mais le problème c'est que les images sont celles de mon thème par défaut... Donc dès qu'on changera avec le themeswitcher, les classes ne seront plus bonnes, car elles utilisent toujours le style de l'ancien thème (vus que tout est en dur).

Ok je comprends.

Personnellement, je pense que j'aurais choisi la solution Jquery pour assigner les classes et événements sur la table.
Ou ne pas mettre la possibilité de changer le thème. :lol:

Je comprend ton avis, mais ce n'est pas optimal...

Étant donné que j'ai environ 200 lignes, cela ralentit considérablement l'utilisation. Si cela était traité directement depuis le CSS, cela serait plus fluide et beaucoup plus propre :)

Ha oui, 200 lignes effectivement je comprends ton choix.

Sinon une autre solution serait de récupérer tous les css de tes thèmes et d'y ajouter tes classes.

Code:

---

.ui-state-hover, .taClasse {}

---