鼠标指针在 chrome 全屏 div 上不隐藏

Question

我想制作一个 HTML 元素全屏（一个 div），并让指针保持隐藏状态。

这看起来很简单（在 div 变为全屏时设置 cursor:none），但它无法跨浏览器正常工作。

下面的代码片段适用于 Firefox，但在 chrome 56/ Mac OSX 中，鼠标指针会在一段时间后重新出现（通常在 1-60 秒内）。

是否有可靠的跨浏览器方式在全屏时隐藏鼠标指针？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fullscreen mouse pointer</title>

    <style>
        .is-fullscreen {
            cursor: none;
            width: 100%;
            height: 100%;;
            background-color: white;
        }
    </style>
</head>
<body>

<div id="gofull">
FULLSCREEN AREA
</div>

<button onclick="makeFS()">Make fullscreen</button>


<script>
    // Button to make a div fullscreen and add relevant style in that case
    function makeFS() {
        // Get FS element, add class, and go fullscreen
        var el = document.getElementById("gofull");
        el.classList.add('is-fullscreen');
        if (el.requestFullscreen) {
            el.requestFullscreen();
        } else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        } else {
            console.log('Your browser does not appear to support fullscreen rendering.');
        }
    }

</script>

</body>
</html>

其他说明

我曾尝试在与全屏显示不同的元素上设置 cursor:none（例如儿童 div），但这也没有帮助。

指针锁 API 似乎有点矫枉过正，我们宁愿不必请求额外的用户许可，因为在 HTML/CSS 中看起来应该很简单.

浏览器错误参考

只有相关的浏览器错误似乎与视频有关。这在没有视频的情况下发生 - 只是静态不变 div.

在 Mac OS X 上比较 FF 51 和 Chrome 56。

Answer 1

1) 光标可以是任何你想要的图像，使用声明：

cursor: url([URI]), auto;

2) 在base-64 encoding中，一个透明的单像素gif具有以下数据URI：

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

将这两者放在一起，当光标悬停在任何给定元素上时，我们可以将光标变成透明的单像素 gif：

工作示例：

div {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto;  
}

<div></div>

鼠标指针在 chrome 全屏 div 上不隐藏

Mouse pointer not staying hidden on chrome fullscreen div

javascript

css

html

google-chrome

fullscreen