jquery hover改变点击效果答案

【问题标题】：jquery hover changes click effectsjquery hover改变点击效果
【发布时间】：2013-04-12 20:27:40
【问题描述】：

我有一个无序列表作为菜单，带有使用 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 链接。

【问题讨论】：

标签： jquery list click hover

【解决方案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');
});

【讨论】：

【解决方案2】：

这行得通：

SEE DEMO

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

hover 是 mouseenter/mouseleave 而不是 mouseout 的别名。

【讨论】：

感谢这个烤。单击另一个按钮后，如何将 mouseenter 和 mouseleave 绑定到上一个按钮？

【解决方案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/

【讨论】：

感谢 RHarrington，这确实有效。但我正在尝试使用 jquery 进行悬停，因为我打算将效果应用于列表标记之外的另一个元素。
为什么你的 .hover jQuery 不能用于这些“其他”元素呢？您需要在 LI 元素上使用 CSS 的唯一原因是触发了 mouseout 事件。 li 之外的元素不应该是这种情况。

【解决方案4】：

$('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

【讨论】：

我已经在 jsfiddle 中改变了这一点，但结果相同。
是的，应该。并应在单击其他项目时重新激活悬停。
几乎完美 :).. 单击新项目后，如何绑定上一个选定项目的悬停？

【解决方案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; }

【讨论】：