CSS和Jquery：addClass不覆蓋css

我有一個腳本，它將一個類添加到懸停的元素上。CSS和Jquery：addClass不覆蓋css

問題是新增加的類似乎沒有'覆蓋'現有的css（儘管在我的樣式表中添加的類是在現有的css下面列出的）。

我不能在元素上使用removeClass，因爲沒有實際的初始類樣式元素。

的 '初始' 的造型需要被重寫爲：

#menu ul li ul li { 
background-color: #ccc; 
}

需要添加的類是：

.whitebg { 
background-color: #fff; 
}

我的腳本是：

$('#menu ul li ul li').hover(
function() { 
    $(this).addClass('whitebg'); 
}, 
function() { 
    $(this).removeClass('whitebg'); 
    } 
);

有沒有人知道我可以解決這個問題的方法？

謝謝！

來源

2013-01-11 MeltingDog

如果存在多個針對相同規則的規則，則需要了解[CSS特異性]（http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/）具有不同選擇器的對象。 – jfriend00

關於CSS的特殊性，一個很好的小工具比較兩個選擇器的重量時有疑問http://specificity.keegan.st/ – Nobita

爲什麼使用jQuery'.hover（）'方法呢？改爲使用CSS僞選擇器'：hover'。我的3級菜單（帶菜單的子菜單的菜單欄）需要準確的零線。你的CSS可以有不同顏色的'#menu ul li li ul'和'#menu ul li li li：hover'。由於我們在導航過程中改變顏色的方式，我們也有'#menu ul li：hover ul li'和'#menu ul ul li li：hover li'規則。我們稍後*用javascript *定時器*增強了菜單*，所以當鼠標在矩形外漂移時，菜單不會快速關閉。 –

這是因爲特異性。您可以使用!important作爲其他帖子建議，但使用!important在您的CSS是壞習慣。

Use that as you last option.

而是使用兩類..

確保內最裏有default類吧..

$('#menu ul li ul li').addClass('default').hover(
    function() { 
     $(this).addClass('whitebg').removeClass('default'); 
    }, 
    function() { 
     $(this).removeClass('whitebg').addClass('default'); 
    } 
);

Check Fiddle

來源

2013-01-11 01:04:36

謝謝 - 我同意這一點，但對我而言，不幸的是，我使用的CMS使得難以直接將類應用於該特定元素。我可以使用JQuery來應用這個類，但這需要完全依賴於JavaScript。這就是說，在你看來，你認爲哪個更強大：完全依賴JQuery或依賴！important？ – MeltingDog

如果你想讓事情變得非常快速和骯髒，那麼'重要'是要走的路。否則，我會依賴於JavaScript ..你只需要一個額外的'addClass'在同一個選擇器中..我已經更新了這篇文章和小提琴以供您參考 –

id選擇器優先於選擇器class。您需要!important

.whitebg { 
background-color: #fff !important; 
}

來源

2013-01-11 01:02:36

更準確地說，「在選擇器中，'id'比'class'具有更高的特異性 - 」事實是，更具體的選擇器優先於不太具體的選擇器。 –

簡單的！重要的標記添加到.whitebg類的背景色。這應該能解決你的問題。

來源

2013-01-11 01:03:08

然後，你需要代碼爲：

#menu ul li ul li { 
    background-color: #ccc; 
} 
#menu ul li ul li.whitebg { 
    background-color: #fff; 
}

只有這樣，我們纔能有一個共同的父類。

!important將是一個兼容性問題。

來源

2013-01-11 01:18:40 jikey

CSS和Jquery：addClass不覆蓋css

回答

相關問題