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

【问题标题】：hide idle cursor on web page in Chrome在 Chrome 中隐藏网页上的空闲光标
【发布时间】：2012-11-11 04:03:53
【问题描述】：

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

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

我能用它做什么？

【问题讨论】：

这不是 W3c 的标准功能（并且有充分的理由）。见：stackoverflow.com/questions/2636068/…

标签： javascript html google-chrome

【解决方案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无耻地从这个post盗取）

【讨论】：