Question

我有一个无序列表作为菜单，使用jquery悬停效果（不是css因为我打算在悬停时对其他元素进行其他更改）。我在点击上应用了一个效果并禁用了鼠标悬停以防止它在鼠标移动时更改，但我似乎无法完成这个简单的任务。点击效果不会改变背景，我再也无法再点击，因为它已被解除绑定。

应用悬停效果
将效果应用于点击的项目
在选择其他项目时删除上一个效果

这里是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

这有效：

SEE DEMO

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

DEMO HERE

Answer 3

我会在样式表中使用CSS：悬停选择器

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

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

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

jquery悬停更改单击效果

5 个答案: