如何在悬停时更改图像的来源（通过附加后缀）？

Question

我有一个依赖图标而不是文本的导航栏。但是，我想将悬停时的图标换成替代图标，而不是手动输入 src 属性；在悬停时，我正在寻找一个 jQuery 脚本，它将“-h”附加到图像 src 的末尾（在 .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'));
    }
);