When to choose mouseover() and hover() function? When to choose mouseover() and hover() function? jquery jquery

When to choose mouseover() and hover() function?


From the official jQuery documentation

  • .mouseover()
    Bind an event handler to the "mouseover" JavaScript event, or triggerthat event on an element.

  • .hover() Bind one or two handlersto the matched elements, to be executed when the mouse pointerenters and leaves the elements.

    Calling $(selector).hover(handlerIn, handlerOut) is shorthand for: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);


  • .mouseenter()

    Bind an event handler to be fired when the mouse enters an element,or trigger that handler on an element.

    mouseover fires when the pointer moves into the child element aswell, while mouseenter fires only when the pointer moves into thebound element.


What this means

Because of this, .mouseover() is not the same as .hover(), for the same reason .mouseover() is not the same as .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times// enter and exit functions only called once per element per entry and exit$('selector').hover(enter_function, exit_function) 


.hover() function accepts two function arguments, one for mouseenter event and one for mouseleave event.


You can try it out http://api.jquery.com/mouseover/ on the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.

In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from the parent element to the element.