Why does .hover () not work with rendered images, but .mouseover () does?

Recently worked with image maps and was trying to do something when hovering an image map. Naturally I tried it first .hover()

, but it didn't work and so when I tried to work with .mouseover()

.

My question is, why does it work and not the other?

/*This function works*/
$(document).on('mouseover', '#some-map', function(){
    console.log('I am hovering with mouseover()');
}).on('mouseout', function(){
    console.log('I am no longer hovering with mouseover()');
});

/*This function does not work*/
$(document).on('hover', '#some-map', function(){
    console.log('This is from hover()');
}, function(){
    consoel.log('Out from hover()');
});