jQuery mousemove() Method
You are Here:
jQuery mousemove() Method
The jQuery mousemove()
method is used for the following 2 purpose
- To run a callback when a mouse moved over a specified element.
- 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
Value | Type | Explanation |
---|---|---|
callback | Optional | Specifies 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.