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无耻地从此post中偷走）

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

1 个答案: