如何更改一般懸停圖像的來源（通過追加後綴）？

Question

我有一個導航欄，它依賴於圖標而不是文本。但是，我想將懸停時的圖標替換爲替代圖標，而不是手動輸入src屬性;在懸停時，我正在尋找一個jQuery腳本，它將在圖像src的末尾附加「-h」（在.png擴展名之前）。例如，當圖標「home.png」懸停時，jQuery將其src更改爲「home-h.png」;和about.png => about-h.png等相同。在鼠標移出後，圖像應該恢復到原始狀態。

這可能嗎？

感謝， 傑米

Answer 1

這應該爲你工作：

$("#navbar img").hover(
    function(){ 
     $(this).attr('src', $(this).attr('src').replace(/\.png$/, '-h.png')); 
    }, 
    function() { 
     $(this).attr('src', $(this).attr('src').replace(/-h\.png$/, '.png')); 
    } 
);