悬停在列表项上的效果

Hover effects on list item

本文关键字：列表 悬停      更新时间：2024-04-22

在垂直导航中，我想突出显示上次单击且当前处于活动状态的列表项。高亮显示是通过为列表项指定红色背景来完成的。我还想在鼠标悬停时突出显示列表项。问题是，当鼠标悬停在其他列表项上时，我想暂时从活动列表项中删除活动类，并且当鼠标指针不再位于非活动列表项时，该活动类将再次分配回活动列表项。以下是它在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');
});
});

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

我自己的建议是将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演示。

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');
    });
});
相关文章：