jQuery的似乎撤消CSS WebKit的懸停效果

我有幾個的div類。注意，併爲他們下面的CSS代碼：jQuery的似乎撤消CSS WebKit的懸停效果

.note{ 
      background: #eff9ff; 
      -webkit-transition: background .5s; 
     } 

      .note:hover{ 
       background: #d6e4f2; 
      } 

      .note:active{ 
       background: #bfcdda; 
      }

由於WebKit的動畫，將鼠標懸停在之後順利地改變顏色DIV。

不過，我也使用jQuery改變完全取決於屬性「selectednote」一旦它被點擊的div的背景下，只有撤銷，一旦再次單擊，就像這樣：

$('.note').click(function(){ 
if($(this).attr('selectednote')=='no'){ 
    $(this).attr('selectednote','yes'); 
    $(this).css('background','#bfcdda'); 
}else if($(this).attr('selectednote')=='yes'){ 
    $(this).attr('selectednote','no'); 
    $(this).css('background','#eff9ff'); 
} 
});

一切工作正常，但只要我點擊的div和它已經改變了它的背景，CSS懸停和主動效果不再工作了。

也許我應該完全擺脫CSS？我試圖拿出以下jQuery的懸停效果，但無濟於事：

$('.note').mouseover(function(){ 
$(this).animate({ 
    background: '#d6e4f2' 
},500); 
});

我在做什麼錯在這裏？

來源

2012-08-01 weltschmerz

您可以使用CSS這根棍子不使用無效的自定義屬性這樣的一個。

.note.selected { 
    background: #bfcdda; 
}

類selected的簡單切換。你也可以使用.data()來調整它。

$('.note').click(function(){ 
    $(this).toggleClass("selected"); 
});

See it working。

來源

2012-08-01 20:43:36 Alexander

這完美的作品！非常感謝你！出於好奇，你可能知道我對animate（）函數做了什麼錯誤嗎？我不會再使用它，但我只是感興趣。 – weltschmerz 2012-08-01 20:49:57

@Charles - .animate（）不能用於顏色，除非你已經包含jQueryUI。 – nnnnnn 2012-08-01 20:53:55

@nnnnnn我明白了，謝謝！ – weltschmerz 2012-08-01 20:54:53

我已將!important添加到:hover規則中，似乎可以解決此問題。

.note:hover{ 
    background: #d6e4f2 !important; 
}

DEMO

來源

2012-08-01 20:39:06 kei

謝謝！然而，@亞歷山大的答案似乎最適合。 – weltschmerz 2012-08-01 20:50:34

jQuery的似乎撤消CSS WebKit的懸停效果

回答

相關問題