0

我有几个带有 .note 类的 div 和以下 css 代码：

    .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);
});

我在这里做错了什么？

4

2 回答 2

2

我已经添加!important到:hover规则中，这似乎可以解决它。

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

演示

于 2012-08-01T20:39:06.747 回答
1

您可以为此坚持使用 CSS，而无需使用类似的无效自定义属性。

.note.selected {
  background: #bfcdda;
}​

类的简单切换selected。您也可以使用它来调整它.data()。

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

看到它工作。

于 2012-08-01T20:43:36.320 回答