如何用jQuery实现这个导航磁贴效果？

Question

在这里,我创建了一个jsfiddle.

当我将鼠标悬停在特定的磁贴上时,它会显示文本,并在鼠标输出时隐藏它.(这很好).

当我点击位于特定图块(金色)内的链接时,该图块的文本将永久显示(这应该在单击其他链接时隐藏).

现在的问题是,当我点击位于另一个磁贴内的链接时,应隐藏所有其他磁贴的文本,但这不会发生.这是我的jQuery代码.

// -- navigation tile click -- //           
$('.nav a').on("click",function(){                 
     $(this).addClass('selected');                          
});

// -- navigation tiles mouseover -- //      
$('.nav > div').on("mouseover",function(){  
    $(this).find('.abs').show();        
}).on("mouseout",function(){
    if(!$(this).find('a').hasClass('selected'))
    {
        $(this).find('.abs').hide();
    }
});

有什么更好的方法呢？为此编写jQuery的更好方法是什么？

Answer 1

看看这个小提琴

$('.nav > div').hover(function(){
    $(this).find('.abs').stop().animate({marginLeft:100});
    },function(){
    $(this).find('.abs').stop().animate({marginLeft:0});
});

$('.nav a').click(function(){
    $('.nav a').removeClass("active");
    $('.nav a').next("span").animate({marginLeft:0}).removeClass("absActive");
    $(this).addClass("active");
    $(this).next("span").addClass("absActive");
});