導航按鈕懸停將交換相應的圖像

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