• Difference Between Mouse Over Events in JQuery

    Posted by markzero on Sunday, January 16th, 2011

    JQuery has difference in mouse over/out events. I ramped for an hour trying to figure why my code isn’t working, until figured there are four mouse over/out function: mouseover , mouseout , mouseenter , mouseleave.

    Suppose we have a div inside a div element like this:

    Code for e.g. mouseover event would be:

     
    $('#element').mouseover(function() {
       // do something here
    });

    Looking at the black bordered div element: mouseover will be triggered when mouse enters the div, but will stop when mouse goes over the red div, and will trigger again when mouse enters from the red div area to the black div area; mouseout will trigger when mouse leaves the black element, to the red div’s area or outside; mouseenter (my favorite) is triggered when mouse enters the black div area, but won’t trigger when mouse’s cursor goes over red div, that is, no matter how many child elements the black one has, no events will trigger until inside this div’s region; similarly, mouseleave will trigger only when mouse goes out, none of children elements are involved to this event.

    To sum up, mouseenter and mouseleave are sister functions, likewise mouseover and mouseout.

    Posted in: Javascript, JQuery.

    Share this story:

    Leave a Reply