When to select the mouseover () and hover () function

Question

What is the difference between jquery .mouseover() and .hover() functions? If they are exactly the same, why does jQuery use both?

Answer 1

From the documentation

.mouseover() : source

Bind an event handler to the JavaScript mouseover event, or call this event on an element.

.hover() : source

Bind one or two handlers to matched elements, which will be executed when the mouse enters and leaves the elements.

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

.mouseenter() : source

Bind an event handler that should be launched when the mouse enters an element, or run this event handler on an element.

mouseover fires when the pointer also moves to the child, and mouseenter only fires when the pointer moves to the associated element.

What does this mean

Because of this, .mouseover() does not match .hover() , for the same reason .mouseover() does not match .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) 

Answer 2

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

Answer 3

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

In short, you will notice that a mouse event on an event occurs on an element when you are above it - based on its parent element of the parent OR, but a mouse input event occurs only when the mouse moves from the parent element to the element.

Answer 4

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

The .hover () method binds handlers for mouseenter and mouseleave events. You can use it to easily apply behavior to an element over the time that the mouse is inside the element.

Answer 5

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

The JavaScript event is the property of Internet Explorer. Due to the general event utility, jQuery simulates this event, so that it can be used independently of the browser. This event is dispatched when the mouse pointer enters an element. Any HTML element can receive this event.