0

クラス .note と次の css コードを含むいくつかの div があります。

    .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 に答える