jQuery mousemove() with Examples


The mousemove() method in jQuery is used to trigger the mousemove event. It occurs whenever the mouse pointer moves within the selected element.

Syntax

The syntax is as follows−

$(selector).mousemove(func)

Example

Let us now see an example to implement the jQuery mousemove() method

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("h2").mouseenter(function(){
         $("h2").css("color", "red");
      });
      $("h2").mouseleave(function(){
         $("h2").css("color", "blue");
      });
      $("h2").mousemove(function(event){
         $("p").text("x = "+event.pageX + ", y = " + event.pageY);
      });
   });
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p></p>
</body>
</html>

Output

This will produce the following output −

Now, when the mouse cursor is placed and moved on the heading h2, then the coordinates are visible −

Updated on: 30-Dec-2019

502 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements