jQuery mousemove() Method

You are Here:

jQuery mousemove() Method

The jQuery mousemove() method is used for the following 2 purpose

  1. To run a callback when a mouse moved over a specified element.
  2. To trigger the mousemove event of a specified element.

Run a Callback

In the following example, we will run a callback function when a mouse moved over a specified element.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery mousemove() Method</h1> <p>Try to move the mouse over me.</p> <p>x-axis - <span id="point">0</span></p> <script> $(document).ready(function(){ $("p").mousemove(function(e){ $("#point").text(e.clientX); }); }); </script> </body> </html>

Syntax

$(selector).mousemove(callback);

Parameter Values

ValueTypeExplanation
callbackOptionalSpecifies a function to be called as many times the user move the mouse over the element.

Trigger a mousemove Event

In the following example, we will trigger a mousemove event when a button is clicked.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery mousemove() Method</h1> <p>Try to move the mouse over this paragraph.</p> <button>Trigger mousemove Event</button> <script> $(document).ready(function(){ $("p").mousemove(function(){ alert("mouse is moved over p"); }); $("button").click(function(){ $("p").mousemove(); }); }); </script> </body> </html>

Reminder

Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in jQuery.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author