How to change the mouse pointer?

Question

I need to change the mouse pointer to the wait cursor. I tried

document.body.style.cursor = 'wait';

In my fiddle, my mouse cursor does not change (nor does it change in my main app). I tried a couple methods, but nothing seems to work (IE7 and FF7 tested). How do I change the cursor? I am open to using CSS instead of JavaScript if that works better.

For what it is worth...In the final program, I need to change the pointer at the start of an AJAX call and then change it back to the default in the callback. But, this is a simplified example and still does not work.

possible duplicate of [Wait cursor over entire html page](http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page) — ThiefMaster, Nov 15 '11 at 14:36
It is working fine in chrome , i think some problem in firefox — Akhil Thayyil, Nov 15 '11 at 14:40

score 7 · Answer 1 · edited May 23 '17 at 12:21

7

I'd create a CSS class:

.busy {
    cursor: wait !important;
}

and then assign this class to body or whatever element you want to mark as busy:

$('body').addClass('busy');
// or, if you do not use jQuery:
document.body.className += ' busy';

http://jsfiddle.net/ThiefMaster/S7wza/

If you need it on the whole page, see Wait cursor over entire html page for a solution

edited May 23 '17 at 12:21

Community

1
1

answered Nov 15 '11 at 14:33

ThiefMaster

310,957
84
592
636

This is good. My fear is that the user has to be floating over 'meow' to see the pointer change. Is there something that works while the pointer is simply anywhere in the page body? – P.Brian.Mackey Nov 15 '11 at 14:37
See the link to the other question. You could create a wrapper that covers the whole body area. Or, have a look at the *jQuery blockUI* plugin. You could easily add a busy cursor to the block overlay. – ThiefMaster Nov 15 '11 at 16:37

score 2 · Accepted Answer · answered Nov 15 '11 at 14:34

2

Since there is no text you don't really have a body (in terms of "it has no height").

Try adding some content and then hovering the text: http://jsfiddle.net/kX4Es/4/. You can just use CSS.

Or, add it to the <html> element to bypass this <body> constraint: http://jsfiddle.net/kX4Es/3/.

html {
    cursor: wait;
}

answered Nov 15 '11 at 14:34

pimvdb

151,816
78
307
352

@ThiefMaster: Good point; it seems like the wait cursor only shows up when holding the mouse button and not moving. Not sure if that's a bug or whether `html` is not supposed to have a `cursor` property. Nevertheless the `body` way works. – pimvdb Nov 15 '11 at 16:41

score 0 · Answer 3 · edited Nov 15 '11 at 17:11

0

are you declaring it as a function ?

function cursor_wait() {
    document.body.style.cursor = 'wait';
}

then call

cursor_wait();

in your script ?

edited Nov 15 '11 at 17:11

epascarello

204,599
20
195
236

answered Nov 15 '11 at 14:35

saoirse

53
5

No, but the fiddle is setup with `OnLoad` so this is not necessary right? – P.Brian.Mackey Nov 15 '11 at 14:38

Nathan Q · Answer 4 · 2011-11-15T15:29:56.410

0

Like this:

$('html').css('cursor', 'wait');

Or as a CSS class as said above by ThiefMaster

edited Nov 15 '11 at 15:29

answered Nov 15 '11 at 14:35

Nathan Q

1,892
17
40

score 0 · Answer 5 · answered Nov 15 '11 at 15:53

I only tried this in chrome and firefox so it may not work everywhere. But if you want to do this with javascript and turn it on and off try this.

//add
document.styleSheets[1].insertRule('html {cursor:wait;}',document.styleSheets[1].cssRules.length);
//for firefox I had to tell it to fill the screen with the html element
//document.styleSheets[1].insertRule('html {height:100%;width:100%;cursor:wait;}',0);

//remove
document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length-1);

http://www.quirksmode.org/dom/w3c_css.html#access seems to be a good reference on messing around with the actual stylesheets. I was hoping for a better way to edit the html elements style but this was all I could find...

How to change the mouse pointer?

5 Answers5