When And How To Use jQuery mouseenter And mouseleave Events?

If elements you are binding to are loaded with javascript after the document loads, it is better to use mouseenter and mouseleave events of jQuery.

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

This code will work for an element populated with JavaScript after a .load() event has happened. Just change your argument to the appropriate selector.

This will bind the functions to the selector so that objects with this selector made after the document is ready will still be able to call it.

I have tried to use jQuery .on and hover for an above situation, but it didn't work.

Ref: http://stackoverflow.com/a/9827114