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

悬停对列表项的影响

2 个答案: