列表项上的悬停效果

Question

在我的垂直导航中，我想突出显示上次单击且当前处于活动状态的列表项。突出显示是通过为列表项分配红色背景来完成的。我还想在鼠标悬停时突出显示列表项。问题是当悬停在其他列表项上时，我想暂时从活动列表项中删除活动类，并且当鼠标指针不再位于非活动列表项上时，该活动类再次分配给活动列表项。这是它在 JSFiddle 上的样子：http://jsfiddle.net/9r3tx/2/

这是一个 jQuery 函数，它将活动类分配给被点击的列表项：

//Add class active on click, firts li is active by default
$('.navigation li:first').addClass('active');

$(".navigation li a").click(function(e) {
    $('.navigation li').removeClass('active');
    $(this).parent().addClass('active');
}); 

这就是问题所在：

//Change classes on hover
$(document).ready(function(e) { 
$(".navigation li a").hover(function(e){
    $('.navigation li').removeClass('active');
    $(this).parent().addClass('active');
});
}); 

我知道这会将活动类分配给悬停的链接，并保持不变，但我想暂时分配活动类，当指针位于该列表上方时，这将持续一段时间。

Answer 1

我自己的建议是将 CSS 与 jQuery 结合使用：

$('.navigation li:first').addClass('active');

$('.navigation li').click(function(){
    $(this).addClass('active').siblings('.active').removeClass('active');
});

使用 CSS：

/* overrides the red of the '.active' when the list is hovered:
*/
.navigation:hover li.active {
    background-color: #fff;
}

/*
sets the li.active colour,
ensures the colour of the li.active when it's hovered,
and colours the li elements when they're hovered:
*/
.navigation li.active,
.navigation li.active:hover,
.navigation li:hover {
    background:red;
}

JS Fiddle demo.

Answer 2

THIS 简单的演示如何使用mouseleave 完全满足您的要求

//Add class active on click, firts li is active by default
    $('.navigation li:first').addClass('active');

    $(".navigation li a").click(function(e) {
        $('.navigation li').removeClass('active');
        $(this).parent().addClass('active');
    }); 

//Change classes on hover
$(document).ready(function(e) { 
    $(".navigation li a").hover(function(e){
        $('.navigation li').removeClass('active');
        $(this).parent().addClass('active');
    });

    $(".navigation li a").on('mouseleave', function(e){ // this function for removing
        $(this).parent().removeClass('active');
    });
});