JavaScript Cursor Change (and change back again)

Question

I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait" cursor so the user doesn't flip out and keep clicking the button. I've looked at the

document.body.style.cursor = "wait"

thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?

A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover" cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).

EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?

Answer 1

What I suggest is two things: a) Better write a CSS like

body.waiting * { cursor: wait; }

b) Use the JS to handle the body class

/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want

You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.

EDIT 2019: don't use jQuery for just this, use classList

Answer 2

For your first problem, try using cursor: wait !important;.

For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.