CODEWITHSUNDEEP
jquerycsshidemouse-cursor
KillerFish
KillerFish

Reputation: 5180

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 in all the browsers. Is there any plugin to implement this.

Thanks in Advance.

Upvotes: 10

Views: 29676

Answers (6)

Manny
Manny

Reputation: 566

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.

Upvotes: 1

Joko Wandiro
Joko Wandiro

Reputation: 1987

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

Upvotes: 0

Jamie
Jamie

Reputation: 864

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.

Upvotes: 0

PseudoNinja
PseudoNinja

Reputation: 2856

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?

Upvotes: 0

Ben Everard
Ben Everard

Reputation: 13804

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/

Upvotes: 2

Brian Rose
Brian Rose

Reputation: 1725

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

Upvotes: 4

Related Questions