导航按钮悬停将交换相应的图像

Question

我正在艰难的时光环绕着这一个。

nav concept http://i44.tinypic.com/k96u04.png

悬停一个导航栏按钮将改变图像用于其各自的“聚光灯”时，一个直接在其下方。

我一直在尝试很多不同的方法，由于我对jQuery功能的完整范围还没有记忆，所以我无法掌握这一点。

到目前为止，这是最好的一个，但它需要我为每个元素分配一个ID，而我一直无法弄清楚如何得到一个很好的交叉淡入淡出。

$('a#nav2').hover(function() { 
    $('#nav2_light').attr("src","../img/nav/light_bright.png"); 
}, function() { 
    $('#nav2_light').attr("src","../img/nav/light.png"); 
}); 

我试图找到：完成这个每个导航按钮及其相应的聚光灯 2.交叉衰减图像的一种方式的 1.更有效的方法。 fadeout和fadeIn在淡入下一个之前完全淡出图像，这不是我正在寻找的。

我明白类似的问题已经被问到，但是我发现的问题都只有一个图像的情况。我想让这个功能对每个菜单项都是可重复的。想法？预先感谢您的帮助！

编辑：只是为了澄清，导航按钮和聚光灯是分开的实体。我不确定这是否会在这种情况下起作用。在图中，我将导航按钮全部放在一个div中，而聚光灯放在另一个div中。

编辑2：我已经玩了一下，我想它的工作原理，如果我只是分配一个ID为每个。但是，我仍在寻找一种方法使交换进行交叉淡入淡出。如果我使用.attr函数，任何人都知道如何做到这一点？

Answer 1

使用类要添加此功能的每个元素和

$('.class_name').hover(function() {  
$(this).attr("src","../img/nav/light_bright.png");   
}, function() { 
    $(this).attr("src","../img/nav/light.png"); 
});