jQuery : changer la couleur de fond sans la rendre permanente (actuellement, il a désactivé mon css :hover)

Question

J'ai actuellement un ensemble de divs (boutons) qui survolent toutes les couleurs différentes en utilisant css. Lorsque l'on appuie sur l'une de ces divs, j'utilise jQuery pour rendre la couleur permanente et rétablir la couleur par défaut de toutes les autres divs.

Cependant, il semble qu'une fois cette opération effectuée, la couleur :hover ne fonctionne plus. Est-ce que je me trompe dans l'approche de jQuery ? Comment puis-je résoudre ce problème ? Voici un exemple :

EDITAR

Je poste une jsfiddle pour mieux expliquer. Vous verrez que lorsque vous passez votre souris sur les divs pour la première fois, ils survolent de différentes couleurs. Et si vous cliquez sur la div 1 ou la div 2 (les autres ne fonctionnent pas, je n'ai pas pris la peine de faire le code jQuery pour le fiddle pour toutes les divs), la div garde sa couleur et toutes les autres reviennent à l'original. CEPENDANT, cela désactive la pseudo-classe :hover que j'ai dans mon CSS. J'ai besoin d'aide pour résoudre ce problème.

http://jsfiddle.net/P3Ckk/143/

Quelle est la meilleure solution à ce problème ?

Answer 1

Je n'ai aucune idée de la raison pour laquelle cela se produit (plutôt bizarre), mais lorsque j'ai utilisé :

$("div#mainIconTile1").hover(function () {
   $(this).css("background", "#5aa02c");
}, function () {
   $(this).css("background", "#888");
});

ça a marché ! Vous pouvez donc vous fier à jQuery hover dans ce cas si le CSS ne fonctionne pas. Bien sûr, il y a aussi la solution d'ajouter/supprimer des classes css.