How can I change the mouse cursor in Javascript or in jQuery ? I know it's a very classic question, but very strangely this JSFiddle doesn't work : http://jsfiddle.net/2Qffw/.
Here is the code :
$('body').css('cursor','pointer');
document.body.style.cursor = "pointer";
Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using Javascript, such functionality can we easily misused but we can simulate something similar.
To change the mouse cursor when you hover over a specific element, you need to assign the cursor CSS property to your HTML element. You will see the cursor changes when you hover over the <h1> element above. It's as if you're hovering over a <button> element.
You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor. First of all create cursor image and save it with the extension .
Do it in both html
and body
:
$('html,body').css('cursor','crosshair');
http://jsfiddle.net/2Qffw/3/
It does work, but you had an empty body.
http://jsfiddle.net/z6mhH/
HTML
<body>
asdasdasdasdads
</body>
JS
document.body.style.cursor = "crosshair";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With