Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change mouse cursor in Javascript or jQuery

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";
like image 725
Arnaud Avatar asked Jul 01 '13 21:07

Arnaud


People also ask

Can JavaScript Move cursor?

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.

Can you change cursor in HTML?

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.

How do I customize my cursor in HTML?

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 .


2 Answers

Do it in both html and body:

$('html,body').css('cursor','crosshair');

http://jsfiddle.net/2Qffw/3/

like image 72
elclanrs Avatar answered Oct 16 '22 19:10

elclanrs


It does work, but you had an empty body.

http://jsfiddle.net/z6mhH/

HTML

<body>
    asdasdasdasdads
</body>

JS

document.body.style.cursor = "crosshair";
like image 36
Aart Stuurman Avatar answered Oct 16 '22 18:10

Aart Stuurman