如何更改一般悬停图像的来源（通过追加后缀）？

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