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 −


Advertisements