Jquery on hover not functioning

Question

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?

$(document).on('hover', '.top-level', function (event) {   $(this).find('.actionfcnt').show();   $(this).find('.dropfcnt').show(); }, function () {   $(this).find('.dropfcnt').hide('blind', function () {     $('.actionfcnt').hide();   }); }); 

Answer 1

Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Source: http://api.jquery.com/on/#additional-notes

That pretty much says it all, you cant use "hover" for that:

$(document).on('mouseenter','.top-level', function (event) {     $( this ).find('.actionfcnt').show();     $( this ).find('.dropfcnt').show(); }).on('mouseleave','.top-level',  function(){     $( this ).find('.dropfcnt').hide('blind', function(){         $('.actionfcnt').hide();     }); });