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

Question

What are the differences between jQuery .mouseover() and .hover() functions? If they are totally same why jQuery uses both?

This is not duplicate question. your provided link has mouseover and mouseenter events but mine is mouseover and hover events. — Bhojendra Rauniyar, Jul 11 '13 at 09:19
they are different in the same as mouseover nad mouseleave and the accepted answer below is not accurate... the hover function adds a mouseenter and mouseleve events not mouseover and mouseout events — Arun P Johny, Mar 19 '14 at 03:21
see http://jsfiddle.net/arunpjohny/cZb5b/1/ move the mouse from the `el` element to `child` and check the console — Arun P Johny, Mar 19 '14 at 03:35
@ArunPJohny please re-read, that's saying mouseenter and mouseleave not mouseover and mouseout. — Bhojendra Rauniyar, Mar 19 '14 at 03:35
also with hover - http://jsfiddle.net/arunpjohny/cZb5b/2/ if you can analyze the console, you can find the difference... — Arun P Johny, Mar 19 '14 at 03:38

score 130 · Accepted Answer · edited Oct 18 '19 at 15:42

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, while mouseenter 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)

score 33 · Answer 2 · answered Jul 11 '13 at 09:11

33

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

answered Jul 11 '13 at 09:11

mishik

9,973
9
45
67

this is a great point in terms of the differences between the two functions mentioned in the question title, Thanks! check out the link below on w3schools for how .hover() works: https://www.w3schools.com/jquery/event_hover.asp – Bahman.A May 09 '19 at 21:49

score 9 · Answer 3 · edited Jul 11 '13 at 16:14

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.

score 2 · Answer 4 · answered Jul 11 '13 at 09:12

2

From the offical docs: (http://api.jquery.com/hover/)

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

answered Jul 11 '13 at 09:12

Wottensprels

3,307
2
29
38

score 2 · Answer 5 · answered Jul 11 '13 at 09:12

As you can read at http://api.jquery.com/mouseenter/

The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

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

5 Answers5

From the official jQuery documentation

What this means

Linked