jQuery/css addClass() Stil überschreiben vorherige Stileigenschaft

Question

Ich habe ein div mit seiner Standardklasse, die es einen grünen Hintergrund gibt. Wenn die Maus gedrückt wird, möchte ich den Hintergrund in Rot ändern, bis die Maus losgelassen wird.

Ich habe versucht, Class eine Klasse mit einer roten Hintergrundfarbe hinzuzufügen. Die neuen Klasseneigenschaften scheinen die vorhandenen Eigenschaften nicht zu überschreiben. Ich habe die neue Klasse nach dem Original in der .css-Datei aufgeführt.

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

Das Problem ist, dass IDs Klassendefinitionen überschreiben. Ändern Sie den Hintergrund in Klassen anstelle von IDs

Answer 2

ids> Klassen

Sie .calc_no verwenden könnte und .calc_yes statt

Answer 3

In CSS haben verschiedene Arten von Selektoren unterschiedliche Gewichtungen. Eine ID hat ein größeres Gewicht als eine Klasse, die beispielsweise ein größeres Gewicht als ein Tag-Name hat. Ihre ID-basierten Stile überschreiben also die klassenbasierten Stile.

Für diesen einfachen Fall versuchen, das !important Schlüsselwort:

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

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