jQuery / css addClass() style overriding previous style property

1
votes

I have a div with its default class giving it a green background. When the mouse is pressed, I want to change the background to red until the mouse is let go.

I have tried to addClass a class with a red background-color. The new class properties seem to not override the existing properties. I have the new class listed after the original in the .css file.

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>
3
jquerycssbackground-coloraddclass

3 Answers

4
votes

In CSS, different types of selectors have different weights. An id has greater weight than a class, which has greater weight than a tag name, for example. So, your id-based styles are overriding the class-based styles.

For this simple case, try using the !important keyword:

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

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

3
votes

the problem is that ids override class definitions. change the background in classes instead of ids

1
votes

ids > classes

you could use .calc_no and .calc_yes instead