abo*_*ght 2 html javascript css google-chrome fullscreen
我想让一个 HTML 元素全屏显示（div），并让指针保持隐藏状态。
这看起来很简单（cursor:none当 div 变为全屏时在 div 上设置），但它无法跨浏览器正常工作。
下面的代码片段适用于 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。
1) 光标可以是任何你想要的图像，使用以下声明：
cursor: url([URI]), auto;
2) 在 中base-64 encoding，透明单像素 gif 具有以下数据 URI：
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
将这两者放在一起，当光标悬停在任何给定元素上时，我们可以将光标变成透明的单像素 gif：
工作示例：
cursor: url([URI]), auto;
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
| 归档时间： |
|
| 查看次数： |
3242 次 |
| 最近记录： |