How to hide mouse cursor with jquery

How to hide mouse cursor with jquery in entire webpage. I tried this

$(document).ready(function(){
        $(body).css({
           'cursor' : 'none'
        });
});

But this is not working i开发者_JAVA技巧n all the browsers. Is there any plugin to implement this.

Thanks in Advance.

$('body').css('cursor', 'none');

I bet it has nothing to do with the jQuery method, but in fact the CSS for your page.

Make sure (using firebug) that the body element is actually visible on the page, the contents might because the overflow is set to auto by default, but you'll also need to set the body height and width to 100% to ensure that when you're mouse moves across the screen it actually invokes body.mouseover()

Here's a working example » http://jsfiddle.net/Ilmv/XQmqe/

Another solution could be done by loading custom transparent ICO/PNG file as cursor.

cursor: url('my-transparent-cursor.ico');

So now user has cursor but is transparent, invisible. Just my two cents.

What about using a transparent div overlay (div with an absolute position, 100% width and height, and positive z-index) with cursor set to none. Then use jQuery to toggle it on/off?

Should definitely work in all browsers. Check in firebug which elements the cursor occurs on and see if it has an explicit "cursor: pointer;" or equivalent setting.

I think u can make overlay with div element when page is ready you set visibility to block.

HTML CODE:

<div>Test</div>

CSS CODE:

div {
  position: fixed;
  left: 0%;
  width: 100%;
  height: 100%;
  cursor: none;
  visibility: block;
}

hope it can help u.. I test it on jsfiddle and it works for me

Maybe it what u find