jQuery/css style addClass() redéfinissant la propriété de style précédente

Question

J'ai une div avec sa classe par défaut lui donnant un fond vert. Lorsque la souris est pressée, je veux changer l'arrière-plan en rouge jusqu'à ce que la souris soit relâchée.

J'ai essayé d'ajouter une classe avec une couleur de fond rouge. Les nouvelles propriétés de classe ne semblent pas remplacer les propriétés existantes. J'ai la nouvelle classe répertoriée après l'original dans le fichier .css.

css

#calc_no { background-color: #cd9781; } 
#calc_yes { background-color: #8fba8e; } 
.button_click { background-color: red; } 

JScript

$('.button').live('mousedown', function() { 
    $(this).addClass("button_click"); 
}); 
$('.button').live('mouseup', function() { 
    $(this).removeClass('button_click'); 
}); 

html

<div id="calc_yes" class="kp_button button">Yes</div> 

Answer 1

le problème est que les ID remplacent les définitions de classe. modifier l'arrière-plan dans les classes au lieu des ID

Answer 2

ids> Cours

vous pouvez utiliser .calc_no et .calc_yes à la place

Answer 3

En CSS, différents types de sélecteurs ont des poids différents. Un identifiant a plus de poids qu'une classe, qui a plus de poids qu'un nom de tag, par exemple. Ainsi, vos styles basés sur les ID remplacent les styles basés sur les classes.

Pour ce cas simple, essayez d'utiliser le mot-clé !important:

.button_click { background-color: red !important; } 

http://www.w3.org/TR/CSS2/cascade.html#specificity