Understanding jQuery Mousemove Event – .mousemove()

Understanding jQuery Mousemove Event – .mousemove()

The jQuery Mousemove event provides real time X and Y coordinates of the mouse pointer. You can use it to find the position of your mouse moving over an element.

Syntax – jQuery .mousemove() event

$(selector).mousemove(function (e) {
// code
});

Example – Finding the X and Y coordinates of mouse with .mousemove() event

I have a div element and when I move my mouse over it then I should get the X and Y coordinates.

To create this code I will use the .mousemove() event.

<div id="div1">Move Mouse Here</div>

$("#div1").mousemove(function (e) {
    $(this).html("X coordinate: " + e.pageX + "<br>Y coordinate: " + e.pageY)
});

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.