更改CSS後，懸停不起作用

運行後：$('.bar').css({'color':'#fff'});懸停for .bar停止工作。爲什麼？更改CSS後，懸停不起作用

另外，$('.bar:hover').css({'color':'#fff'});也不會改變懸停的顏色，爲什麼？我錯過了什麼？

可能是因爲懸停狀態是一個僞類，所以當您更改'.bar'的值時，它也會將其更改爲'.bar：hover'。 – 2012-02-17 16:34:58

'$（'。bar：hover'）'不是一個標準的jQuery選擇器，是由一個插件實現的嗎？ – 2012-02-17 16:36:14

您是否嘗試過... css（「color」，「#fff」）而不是使用pair值？如果你使用pair值可能會改變整個css，同時如果你只是以非pair-value的方式來做，你只需要改變那個css值。 – elvenbyte 2012-02-17 16:57:12

您還沒有定義你所說的「懸停」的意思，但如果你在談論CSS :hover，則是因爲內嵌樣式（如.css()覆蓋樣式表的樣式設置。

您可以添加!important你的CSS定義來覆蓋內聯。

.bar:hover { 
    color: #ABCDEF !important; 
}

我不相信這一點也適用，雖然舊的IE瀏覽器。

另一個（而且可能更好）的解決辦法是使用.addClass()而不是.css()轉變作風。然後你可以在你的CSS （除了添加/刪除課程的課程）。

$('.bar').addClass('whiteColor');

.whiteColor { 
    color:#fff; 
}

關於你提到的更新，您不能使用僞選擇像:hover對DOM的選擇。

2012-02-17 16:35:09

但爲什麼jQuery會覆蓋懸停事件？我瞭解內聯對外部的優先級，但只有在樣式衝突時才適用。 – Yamcha 2013-07-03 03:44:47

在cascade中，style屬性中的規則將擊敗使用選擇器應用的規則。

jQuery css方法修改樣式屬性。

保持你的CSS和JS分開。使用JS編輯添加並從HTML中刪除類，並使用類選擇器應用您的CSS。（請確保:hover規則仍有足夠的選擇specific）。

作爲一個快速和骯髒解決，你也可以讓你:hover規則!important，但you shouldn't。

另外，$('.bar:hover').css({'color':'#fff'});也不會改變懸停的顏色，爲什麼？

jQuery的選擇器引擎匹配元素，它不會修改樣式表。如果支持，那麼你會說：「在執行代碼時，使.bar指向白色」而不是「當我指向.bar時，使它變成白色」。

2012-02-17 16:35:28 Quentin

回答