Как мне изменить источник изображения при наведении (добавив суффикс)?

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