hide idle cursor on web page in Chrome

Question

There is custom html5 video player. It has control bar that hide on idle in fullscreen mode. I would like to hide a cursor too. I tried just apply .cursor = 'none' style to body. Chrome wait for mouse move after applying style. But it works good in Firefox. By the way Youtube flash player hide cursor, but not Youtube html5 player.

You can check this here - http://jsfiddle.net/xAfUm/1/

What can I do with it?

It's not a standard feature of W3c (and for good reasons). See: http://stackoverflow.com/questions/2636068/hide-cursor-in-chrome-and-ie — JAR.JAR.beans, Nov 10 '12 at 19:54

score 4 · Accepted Answer · edited May 23 '17 at 11:48

You may need to set your cursor to a transparent 1x1 image.

You can either create a transparent gif beforehand

document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer";

or use canvas to create one on the fly

    var tmpCanvas = document.createElement("canvas");
    tmpCanvas.setAttribute("width",1);
    tmpCanvas.setAttribute("height",1);

    document.body.style.cursor = "url('"+tmpCanvas.toDataURL()+"'), pointer";

Both solutions seem to work in Firefox, but Chrome still shows a 1x1 black pixel

(transparent GIF shamelessly stolen from this post)

hide idle cursor on web page in Chrome

1 Answers1