So erkennen Sie die Maus x/y in Tastendruck/Keydown

Question

Ich möchte mein Cursor-Bild in ein animiertes gif ändern, wenn Benutzer auf die Taste drücken.

Ich versuchte, die css „Cursor“ Eigenschaft zu ändern, aber es bewegt sich nicht ...

Deshalb mag ich mit Hintergrundbild einen div machen und es in meinem Cursor X/Y-Position.

Was ich versucht, so weit zu tun ist:

var xPlace; 
var yPlace; 

$(document).mousemove(function(eventParent) { 
    xPlace = eventParent.pageX; 
    yPlace = eventParent.pageY; 
}); 

$(document).keydown(function(event) { 
    if (event.keyCode == 109) { 
     $("body").addClass("accessibility_cursordetect"); 
     var cursorDetect = '<div class="accessibility_cursordetect_img"></div>'; 
     $(cursorDetect).appendTo("body"); 
     $(".accessibility_cursordetect_img").css({ 
      "top": yPlace, 
      "right": xPlace 
     }); 
    } 
}); 

Das Problem ist - in meiner keydown Funktion -xPlace & yPlace return "undefined"

Wie kann ich erkennen, die x/y-Position den Cursor, wenn der Benutzer eine bestimmte Taste drückt ("m" zum Beispiel = keyCode = 109)?

Vielen Dank.

Answer 1

Sie können die "cursor" -Eigenschaft auf folgende Weise verwenden, um das Cursorbild (in diesem Beispiel Ihr Profilfoto) mit einem Klick auf die Schaltfläche zu ändern, wenn Sie bereits die jQuery zum Hinzufügen der body-Klasse haben:

.accessibility_cursordetect{ 
    cursor: url(https://www.gravatar.com/avatar/9b2dfec811b4643164cba1fd1f244404?s=32&d=identicon&r=PG), auto; 
}