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

Question

有一个自定义的HTML5视频播放器，它有控制栏，在全屏模式下静止时隐藏。我想也隐藏光标。我尝试将.cursor = 'none'样式应用于body。Chrome在应用样式后等待鼠标移动。但在Firefox中效果很好。顺便说一句，Youtube Flash播放器会隐藏光标，但不包括YouTube HTML5播放器。

您可以在此处检查 - http://jsfiddle.net/xAfUm/1/ 我该怎么办？

- Novelist

---

这不是W3c的标准功能（而且有很好的理由）。请参见：https://dev59.com/CHE85IYBdhLWcg3wvGKm - JAR.JAR.beans

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的黑色像素。

（透明GIF图像无耻地从这篇文章中偷走）

- lostsource