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的悬停效果

回答

相关问题