Cross browser hides mouse cursor

Question

I would like to improve the depth effect by hiding the mouse cursor when it passes through the div, is there a method that will work in all browsers?

Answer 1

It 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 be very annoying for visitors.

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

Answer 2

Finding what works in browsers is a pain.

The code below works in Chrome, IE, and Firefox. IE loves .cur files, Chrome loves the built-in png, and some browsers actually don't respect any :)

#div {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
    url(images/blank.cur),
    none !important;
}

Answer 3

?

Answer 4

(, , ,...), ... , . , .

EDIT: firefox cursor:none; body , , .

Answer 5

. ( :()
1x1 1% , cursor:none.