javascript - Can't start new jquery functions during drag event -

i noticed css hover function doesn't trigger when dragging element outside page. wanted have "drop here" div lights when mouse on it, hover didn't work , neither this:

    // cosmetic thing     $('#dropzone').on({         dragover: function(e) {             $('#dropzone').addclass('on');         },         dragleave: function(e) {             $('#dropzone').removeclass('on');         }     }); 

i can see in inspector class being added, doesn't light up.

i tried closing popup drop area, mousemove event while dragging, event doesn't seem work until after let go of mouse:

        $(document).on('mousemove',function(e){             console.log('x:'+e.pagex+' y:'+e.pagey);             if (e.pagex <= 0 || e.pagex > $(document).width() || e.pagey <= 0 || e.pagey > $(document).height())             {                 dropperoff();                 $(document).unbind('mousemove');             }         }); 

lastly tried have constant mousemove tracking event populates mousex , mousey variable @ times. when move mouse, works fine, moment dragenter event fires, mousemove event stops working too.

this behavior making hard make page work. there way around or have give on making dropzone light , detect when drag event leaves page?