CODEWITHSUNDEEP
javascripthtmlcss
davivid
davivid

Reputation: 5960

cross browser hide mouse cursor

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?

Upvotes: 4

Views: 4126

Answers (5)

BGerrissen
BGerrissen

Reputation: 21680

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.

Upvotes: 2

Aditya Ravi Shankar
Aditya Ravi Shankar

Reputation: 371

Finding something that works across browsers is a pain.

The code below works on Chrome, IE, and Firefox. IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)

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

Upvotes: 4

Jorge
Jorge

Reputation: 11

Why don't you simply reduce the size of the cursor as it gets closer to the center of the deep field?

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

Using a full transparent picture will not help. (It won't let you do that:()
You should use a 1x1 1% transparent image instead, plus cursor:none.

Upvotes: 0

Christophe
Christophe

Reputation: 4828

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.

Upvotes: 0

Related Questions