Question

我有几个div与类.note及以下css代码：

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

            .note:hover{
                background: #d6e4f2;
            }

            .note:active{
                background: #bfcdda;
            }

由于webkit动画，它会在将鼠标悬停在div上后平滑地改变颜色。

但是，我也使用jQuery完全改变了div的背景，一旦点击它就取决于属性'selectednote'，并且只有在再次点击它时才撤消它，如下所示：

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

我在这里做错了什么？

Answer 1

我已将!important添加到:hover规则中，似乎已解决此问题。

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

DEMO

Answer 2

你可以坚持使用CSS而不使用像那样的无效自定义属性。

.note.selected {
  background: #bfcdda;
}

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

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

See it working

jQuery似乎撤消了css webkit悬停效果

2 个答案: