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

我在这件事上很难受

将鼠标悬停在导航栏按钮上，将更改其各自聚光灯（位于其正下方的聚光灯）的图像

我一直在尝试许多不同的方法，但由于我还远远没有记住jQuery的全部功能，所以我无法掌握这一点

到目前为止，这是最好的一个，但它需要我为每个元素分配一个ID，而我还没有弄清楚如何获得一个好的交叉渐变

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

我想找到： 1.为每个导航按钮及其各自的聚光灯提供更有效的方法 2.交叉淡入淡出图像的方法。淡出和淡出在淡入下一张图片之前完全淡出，这不是我要找的

我知道有人问过类似的问题，但我发现的都是只有一张图片的实例。我想让每个菜单项的功能都可以重复。思想？提前感谢您的帮助

编辑：为了澄清，导航按钮和聚光灯是独立的实体。我不确定这在这种情况下是否有效。在图中，我将导航按钮全部放在一个div中，聚光灯放在另一个div中

---

编辑2：我有点玩弄它，我想如果我只为每个人分配一个ID，它就会工作。然而，我仍然在寻找一种方法，使交换进行交叉淡入。如果我正在使用.attr函数，有人知道如何执行此操作吗？

对要添加此函数的每个元素使用类，然后

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

---

谢谢你的回答，但几乎和我现在的答案一样。如果我使用扫射类瞄准目标，它会同时改变每个灯光，不是吗？我需要一个一个的。我还试图找到一种方法，使它淡入第二张图像。