jQuery/css addClass（）樣式覆蓋以前的樣式屬性

我有一個div，其默認類給它一個綠色的背景。當按下鼠標時，我想將背景改爲紅色，直到鼠標鬆開。jQuery/css 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>

來源

2010-11-20 David Houde

問題在於ID覆蓋類定義。在類中改變背景而不是ID

來源

2010-11-20 19:20:06

謝謝，這個作品perfectl.y – 2010-11-20 19:26:58

感謝aletzo過，他得到了它第一個（而我正在寫我的）。 upvotes是一種很好的方式來說Stack Overflow中的想法。好運編碼，水手！ – 2010-11-20 19:28:11

IDS>類

你可以使用.calc_no和.calc_yes代替

來源

2010-11-20 19:18:20 aletzo

謝謝，這工作完全 – 2010-11-20 19:27:34

在CSS中，不同類型的選擇器具有不同的權重。例如，一個id比一個比標籤名稱重量更大的類具有更大的權重。因此，您的基於id的樣式正在覆蓋基於類的樣式。

對於這個簡單的情況下，嘗試使用!important關鍵字：

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

來源

2010-11-20 19:28:56

這個ID是一個正確的答案，但使用'！important'應該是最後的解決方案，因爲它會打破級聯規則並導致稍後維護代碼的問題。 – 2010-11-20 19:49:10

jQuery/css addClass（）樣式覆蓋以前的樣式屬性

回答

相關問題