Global override of mouse cursor with JavaScript

Important Update (2021):

The MDN page for element.setCapture() clearly indicates that this feature is deprecated and non-standard, and should not be used in production.

The browser support table at the bottom of that page indicates that it's only supported in Firefox and IE.

Original answer below

---

Please: don't massacre your CSS!

To implement a drag and drop functionality, you have to use a very important API: element.setCapture(), which does the following :

• All mouse events are redirected to the target element of the capture, regardless of where they occured (even outside the browser window)
• The cursor will be the cursor of the target element of the capture, regardless where the mouse pointer is.

You have to call element.releaseCapture() or document.releaseCapture() to switch back to normal mode at the end of the operation.

Beware of a naïve implementation of drag and drop: you can have a lot of painful issues, like for example (among others): what happens if the mouse is released outside the browser's window, or over an element which has a handler that stops propagation. Using setCapture() solves all this issues, and the cursor style as well.

You can read this excellent tutorial that explains this in detail if you want to implement the drag and drop yourself.

Maybe you could also use jQuery UI draggable if possible in your context.

document.body.style.cursor = "move"

should work just fine.

However, I recommend to do the global styling via CSS.

define the following:

body{
   cursor:move;
}

The problem is, that the defined cursors on the other elements override the body style.

You could do someting like this:

your-element.style.cursor = "inherit"; // (or "default")

to reset it to the inherited style from the body or with CSS:

body *{
   cursor:inherit;
}

Note however, that * is normally considered a bad selector-choice.