La libreria javascript jQuery consente di rilevare con facilità la posizone del mouse.
Per farlo ti basta utilizzare il metodo mousemove() applicato al selettore. Se vuoi sapere il coordinate del mouse quando sei sopra deli oggetti di una data classa ti basterà scrivere:
$('.miaClasse').mousemove(function (e){.....})
Il codice che abbiamo scritto si attiva quando passiamo con il mouse su un ogetto con classe miaClasse, a questo punto tramite il metodo mousemove() viene attivata la funzione di callback, a cui passiamo l’evento e. Il corpo della funzione si occuperà di scirvere le coordinate.
Ecco il codice completo:
$('.miaClasse').mousemove(function(e){
$('#mostra ').html("posizione di X = " + e.pageX + " , posizione di Y = " + e.pageY);
});
Questo breve codice scirverà nell’oggetto con id mostra le coordinate di x e t.
I migliori libri per sapere tutto su jQuery
 | JQuery Guida completa copertina flessibile |  |
 | jQuery: Corso di programmazione per principianti Copertina | |
 | JavaScript & JQuery. Sviluppare interfacce web interattive. | |
Ecco il codice completo e funzionante:
<!DOCTYPE html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<title>Mostrare le coordinate del mouse con jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$('.miaClasse').mousemove(function(e){
$('#mostra').html("posizione di X = " + e.pageX + " , posizione di Y = " + e.pageY);
});
});
</script>
<style type="text/css">
.miaClasse,#mostra{
width: 50%;
height: 50px;
margin: 5px auto;
border: 1px solid black;
background-color: darkgrey;
}
#mostra{
height: 20px;
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>Mostrare le coordinate del mouse con jQuery</h1>
<a href="https://blog.webtocom.com/3776/fare-internet/riconoscere-le-cordinate-del-mouse-con-jquery/">Vai all'articolo</a><br>
<div class="miaClasse">Entra qui</div>
<div class="miaClasse">Entra qui</div>
<div class="miaClasse">Entra qui</div>
<div id="mostra"></div>
</body>
</html>
Scarica il file compresso con il codice: