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

Working Fiddle -- 这可以优化，但就目前而言，它按预期工作

$('li').on('click', function (e) {
    $('li').each(function () {
        $(this).css('background-color', 'red');
        $('li').hover(function () {
            $(this).css('background-color', 'blue');
        }, function () {
            $(this).css('background-color', 'red');
        });
    });
    $(this).unbind('mouseenter mouseleave');
    $(this).css('background-color', 'blue');
});