cross browser hide mouse cursor

Question

I would like to enhance a depth effect by hiding the mouse cursor as it passes over a div, is there a method that will work across all browsers?

Answer 1

You can change the type of cursor you use (pointer, help, crosshair,...) but to hide it... Even if this would be possible in modern browers, older browsers won't support this. Also I can't imagine why you would hide the cursor.

EDIT: in firefox when adding cursor:none; to the body element it hides the cursor untill I go over a link, it's maybe a start.

Answer 2

read: w3cschools

Looks like:

/* css */
div {
    cursor: url(url/to/transparent.gif), auto;
}

should do the trick or:

divEl.style.cursor = 'url(path/to/transparent.gif), auto'; // javascript

But hiding the cursor can annoy visitors immensly.

Addendum: In the examples I wrote .gif files, but you might actually need to convert to .cur or .ani files for better browser support.