Live
x
<html><head> <title>mousemove and mouseleave events</title></head><body> <h1>Get the coordinates of the mouse pointer</h1> <div id="myDiv"> </div> <p id="demo"></p></body></html>
Live
xxxxxxxxxx6
#myDiv { width: 150px; height: 150px; border: 1px solid black; cursor: pointer; }
Live
xxxxxxxxxx11
var div = document.getElementById('myDiv'); div.addEventListener('mousemove', function (event) { let coor = ('Mouse pointer coordinates: ' + event.clientX + ', ' + event.clientY); document.getElementById("demo").innerHTML = coor; }); div.addEventListener('mouseleave', function (event) { let coor = ('Mouse pointer left the div'); document.getElementById("demo").innerHTML = coor; });
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.