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

Question

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

你可以在这里查看 - http://jsfiddle.net/xAfUm/1/

我能用它做什么？

Answer 1

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

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

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

或使用画布即时创建一个

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

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

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

（透明GIF无耻地从这个帖子偷了）