jquery - jquery hover改变点击效果

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 是 mouseenter/mouseleave 而不是 mouseout 的别名。

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

在这里演示

Answer 3

我会在你的样式表中使用 CSS :hover 选择器

ul {
    list-style: none;
    padding: 0;
}
ul li {
    height: 20px;
    width: 100px;
    background-color: red;
    padding: 2px;
    margin: 2px;
    text-align: center;
}

ul li:hover {
    background-color: blue;
}

然后点击你可以这样做：

$(document).ready(function(){

    //click
    $('li').click(function(){
       $('ul li').css('background-color', '');
       $(this).css('background-color', 'blue');
    });
});

这是一个更新的 jsFiddle http://jsfiddle.net/SpvUJ/

Answer 4

工作小提琴- 这可以优化，但现在，它按预期工作

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

Answer 5

使用 css 类，它变得更简单：

$("li").hover(function() { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); });
$("li").click(function () { $("li.selected").removeClass("selected"); $(this).addClass("selected"); });

你的CSS：

li { background-color: red; }
li.selected, li.hover { background-color: blue; }