jquery - jqueryホバーはクリック効果を変更します

Question

メニューとして順序付けられていないリストがあり、jquery を使用したホバー効果があります (ホバー時に他の要素に他の変更を加える予定であるため、css ではありません)。クリックに効果を適用し、ホバーを無効にして、マウスアウトで変更されないようにしましたが、この単純なタスクを達成できないようです。クリック効果は背景を変更せず、バインドが解除されているため、再度クリックすることはできません。

1. ホバー効果を適用する
2. クリックしたアイテムに効果を適用する
3. 他のアイテムが選択されているときに以前の効果を削除する

ここにjsがあります

$(document).ready(function(){
//hover
$('li').hover(function(){
   $(this).css('background-color', 'blue'); 
}, function(){
    $(this).css('background-color', 'red'); 
});

//click
$('li').click(function(){
    $(this).unbind('mouseenter mouseout');
   $(this).css('backgrond-color', 'blue');
});

});

ここにjsfiddleリンクがあります。

Answer 1

これは機能します：

デモを見る

 $(this).unbind('mouseenter mouseleave');

hover は、mouseout ではなく mouseenter/mouseleave のエイリアスです。

Answer 2

$('li').click(function () {
    $('li').not($(this)).bind('mouseenter', function () {
        $(this).css('background-color', 'blue');
    }).bind('mouseleave', function () {
        $(this).css('background-color', 'red');
    })
    $(this).unbind('mouseenter mouseleave');
    $(this).css('background-color', 'blue');
});

デモはこちら