jquery - jQuery / css addClass（）スタイルが以前のスタイルプロパティをオーバーライドする

Question

divのデフォルトクラスが緑色の背景になっています。マウスを押すと、マウスを離すまで背景を赤に変えたいです。

背景色が赤のクラスをaddClassにしようとしました。新しいクラスのプロパティは、既存のプロパティを上書きしないようです。.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では、セレクターのタイプが異なれば、重みも異なります。たとえば、IDは、タグ名よりも重要なクラスよりも重要です。したがって、IDベースのスタイルはクラスベースのスタイルを上書きします。

この単純なケースでは、次の!importantキーワードを使用してみてください。

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

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

Answer 2

問題は、IDがクラス定義をオーバーライドすることです。IDの代わりにクラスの背景を変更する

Answer 3

ids>クラス

代わりに.calc_noと.calc_yesを使用できます