When to choose mouseover() and hover() function?
What are the differences between jQuery .mouseover()
and .hover()
functions? If they are totally same why jQuery uses both?
Solution 1:
From the official jQuery documentation
-
.mouseover()
Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
-
.hover()
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters 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 as well, whilemouseenter
fires only when the pointer moves into the bound 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)
Solution 2:
.hover()
function accepts two function arguments, one for mouseenter
event and one for mouseleave
event.