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

【问题标题】：Mouse pointer not staying hidden on chrome fullscreen div鼠标指针不会隐藏在 chrome 全屏 div 上
【发布时间】：2017-02-28 22:24:14
【问题描述】：

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

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

下面的 sn-p 适用于 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。

【问题讨论】：

标签： javascript css html google-chrome fullscreen

【解决方案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;  
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

有趣。我不确定为什么内联图像可以解决这个问题（尤其是当替代方案是cursor: none 时），但它似乎确实有助于初步测试。一个奇怪的问题，一个奇怪的答案，也许，但是......谢谢！