JS- onmousemove()

<!DOCTYPE html>
<html>

  <head>
    <style>
      div {
        width: 200px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
  
    <div onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
  
    <p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
  
    <p>When the mouse is moved over the div, the p element will display the horizontal and vertical coordinates of your mouse pointer, whose values are returned from the clientX and clientY properties on the MouseEvent object.</p>
  
    <p id="demo"></p>
  
    <script>
      function myFunction(e) {
        var x = e.clientX;
        var y = e.clientY;
        var coor = "Coordinates: (" + x + "," + y + ")";
        document.getElementById("demo").innerHTML = coor;
      }
  
      function clearCoor() {
        document.getElementById("demo").innerHTML = "";
      }
    </script>
  
  </body>

</html>

// Code goes here

/* Styles go here */