jQuery Mouse Events

Last Updated Jul 21, 2015, 12:00:06 PM




jQuery Mouse hover() Event

jQuery mouse hover() event is used to bind more than one handlers to the matched elements and then it will be executed when the mouse pointer enters and leaves the HTMLelements.

Syntax

The jQuery hover() event method will bind the handlers on both mouseenter and mouseleave events.

Example

In this example, blue stars(*****) will be displayed as a result when user mouse over on HTML li elements.

Output


Try It Now

jQuery mouseup() Event

jQuery mouseup() event is used to bind an event handler to the javascript “mouse up” event.

Syntax
Example

In the above example when the user press the mouseup then the jquery event gets triggered

Output


Try It Now

jQuery mousdown() Event

jQuery mousedown() event is used to bind event handler to the javascript “mouse down” event.

Syntax
Example

In the above example when the user press the mousedown then the jquery event gets triggered

Output


Try It Now

jQuery mouseenter() Event

jQuery mousesenter() event is used to bind an event handler to be executed when the mouse enters the HTML element.

Syntax
Example

In the above example we can analyse when the mouse down and mouse up event occurs when press and releases on an HTML element.

Output


Try It Now

jQuery mousemove() Event

jQuery mousemove() event in jquery is used to bind an event handler to the javascript “mousemove” event.

Syntax

jQuery mousemove() method behaviour can also be performed by .on( "mousemove", handler ) and .trigger( "mousemove" ). Basically mousemove() event will be fired when mouse pointer moves inside the element.

Example

In the above example, we can analyse when the mousedown and mouseup event occurs when mouse moves inside the html element.

Output


Try It Now

Other Advanced jQuery Events you might want to learn
jQuery Complete Events Reference

jQuery Events

jQuery Document Events

jQuery Keyboard Events

jQuery Mouse Events



Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM