javascript - 在 Chrome 中隐藏网页上的空闲光标

Question

有自定义的 html5 视频播放器。它具有在全屏模式下隐藏在空闲时的控制栏。我也想隐藏光标。我尝试将 .cursor = 'none' 样式应用到正文。 Chrome 在应用样式后等待鼠标移动。但它在 Firefox 中运行良好。顺便说一句，Youtube flash player 隐藏了光标，但 Youtube html5 player 没有。

您可以在此处查看 - http://jsfiddle.net/xAfUm/1/

我能用它做什么？

Answer 1

您可能需要将光标设置为透明的 1x1 图像。

您可以事先创建一个透明的 gif

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

或者使用 Canvas 即时创建一个

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

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

这两种解决方案似乎都适用于 Firefox，但 Chrome 仍然显示 1x1 黑色像素

(无耻的从这个post偷来的透明GIF)