Why does the ".on(<event>, function())" style of jQuery event handler not work for "hover"? -

both of these .hover(function() {...}, function() {...}) using either element id or this work:

$( "#imgposttravel" ).hover(function() {         $('#imgposttravel').addclass('popout_image');         $('#imgposttravel').addclass('shadow');     }, function() {         $('#imgposttravel').removeclass('popout_image');         $('#imgposttravel').removeclass('shadow'); });  $( "#imgposttravel" ).hover(function() {         $(this).addclass('popout_image');         $(this).addclass('shadow');     }, function() {         $(this).removeclass('popout_image');         $(this).removeclass('shadow'); }); 

...whereas using .on( "hover", function() {...}:

$( "#imgposttravel" ).on( "hover", function() {         $('#imgposttravel').addclass('popout_image');         $('#imgposttravel').addclass('shadow');     }, function() {         $('#imgposttravel').removeclass('popout_image');         $('#imgposttravel').removeclass('shadow'); }); 

...does not.

why not?

that's because hover not event name. prior jquery 1.9 library supported using name, stated in "additional notes here:

deprecated in jquery 1.8, removed in 1.9: name "hover" used shorthand string "mouseenter mouseleave". attaches single event handler 2 events, , handler must examine event.type determine whether event mouseenter or mouseleave. not confuse "hover" pseudo-event-name .hover() method, accepts 1 or 2 functions.

since it's not standard event name, , "special case support" once existed gone, doesn't work...