Question

How can I combine toggle hover with on event? The code:

img.on('hover', function(){
            name = $(this).attr('title');
            function(){
              $(this).parent().append('<figcaption>' + name);
            },
            function(){
              $(this).find('figcaption').remove();
            }
          });

Answer 1

You have to split it into mouseenter and mouseleave:

img.on('mouseenter', function() {
    name = $(this).attr('title');
    $(this).parent().append('<figcaption>' + name);
}).on('mouseleave', function() {
    $(this).find('figcaption').remove();
});

which is what hover wraps into a single function.