Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Any advantages of hover over mouseover in JQuery?

Tags:

jquery

I am fairly new to JQuery API. I have been using mouseover, but I have never used hover before. SO I am wondering if I should use hover instead.

like image 883
user327712 Avatar asked May 18 '10 18:05

user327712


People also ask

What is the difference between hover and mouseover events in jQuery?

The hover()method binds handlers for both mouseenter and mouseleave events. Basically, with the hover() method, we will specify what to do when the cursor enters the element and we will specify what to do when the cursor leaves that element.

Is mouseover same as hover?

In computing, a mouseover , mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers.

What does the hover function in jQuery do?

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.

What is the jQuery equivalent of Onmouseover?

jQuery mouseover() Method The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs. Note: Unlike the mouseenter event, the mouseover event triggers if a mouse pointer enters any child elements as well as the selected element.


2 Answers

Well, .hover() binds two handlers for the events mouseenter and mouseleave, so it is a more convenient way and also easier to understand the purpose.

mouseenter differs from mouseover so far as mouseenter is not fired if the cursor is over/enters a child element of the element the handler is bound to.
It is only fired once, when the cursors enters the element. mouseover is always fired, even if the cursor is over a child element.

The best way to see the difference is to have a look at the example of mouseleave().

Furthermore, mouseover and mouseout are real JavaScript events whereas mouseenter and mouseleave are events provided by jQuery (afaik).

In the end, it depends on what you want to achieve. There is no right or wrong and all these methods have their purpose. Unless you show some code, there is not much more to say.


If you mean :hover in CSS and you can achieve the desired effect with it, go for it. If there is a non-JS solution for a certain problem, always choose this one.

like image 70
Felix Kling Avatar answered Sep 20 '22 18:09

Felix Kling


hover just saves you from having to do both a mouseenter and a mouseleave by doing both in one function.

like image 31
Jon W Avatar answered Sep 19 '22 18:09

Jon W