Стиль jQuery / css addClass (), переопределяющий свойство предыдущего стиля

Question

У меня есть div с классом по умолчанию, который задает ему зеленый фон.Когда мышь нажата, я хочу изменить фон на красный, пока мышь не отпустит.

Я попытался добавить класс с красным фоновым цветом.Свойства нового класса, похоже, не переопределяют существующие свойства.У меня есть новый класс, перечисленный после оригинала в файле .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

В CSS разные типы селекторов имеют разный вес.Например, идентификатор имеет больший вес, чем класс, который имеет больший вес, чем имя тега.Итак, ваши стили на основе идентификаторов переопределяют стили на основе классов.

Для этого простого случая попробуйте использовать ключевое слово !important:

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

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

Answer 2

проблема в том, что идентификаторы переопределяют определения классов.изменить фон в классах вместо идентификаторов

Answer 3

идентификаторы> классы

вы можете использовать .calc_no и .calc_yes вместо