jquery悬停更改单击效果

我有一个无序的菜单列表，带有使用jquery而不是css的悬停效果，因为我计划对悬停上的其他元素进行其他更改。我在单击时应用了一个效果，并禁用了悬停，以防止它在mouseout上更改，但我似乎无法完成这个简单的任务。点击效果不会改变背景，我不能再点击了，因为它已被取消绑定

应用悬停效果 对单击的项目应用效果 选择其他项目时删除以前的效果 这是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');
});

})

---

这是链接。

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

---

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

这项工作：

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

此功能：

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

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

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

---

我会在样式表中使用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');
    });
});

---

这里有一个更新的JSFIDLE

我会在样式表中使用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');
    });
});

这里有一个更新的JSFIDLE

——可以对其进行优化，但目前，它的效果与预期一致

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

-这是可以优化的，但目前，它的工作正如预期的那样

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

---

我在JSFIDLE中更改了这个，但结果是一样的。是的，它应该。当点击其他项目时，应该重新激活悬停。几乎完美：。。单击“新建项目”后，如何绑定上一个选定项目的悬停？我在JSFIDLE中对此进行了更改，但结果相同。是的，应该这样做。当点击其他项目时，应该重新激活悬停。几乎完美：。。单击“新建项目”后，如何绑定上一个选定项目的悬停？谢谢。单击另一个按钮后，如何将mouseenter和mouseleave绑定到上一个按钮？谢谢。单击另一个按钮后，如何将mouseenter和mouseleave绑定到上一个按钮？谢谢RHarrington，这确实有效。但是我尝试使用jquery for hover，因为我计划对列表标记之外的另一个元素应用效果。但是为什么你的.hover jquery对这些其他元素不起作用？需要在LI元素上使用CSS的唯一原因是mouseout事件被触发。对于li之外的元素，情况不应该是这样。谢谢RHarrington，这实际上是可行的。但是我尝试使用jquery for hover，因为我计划对列表标记之外的另一个元素应用效果。但是为什么你的.hover jquery对这些其他元素不起作用？需要在LI元素上使用CSS的唯一原因是mouseout事件被触发。li之外的元素不应如此。