Question

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

这看起来很简单（当它变为全屏时在div上设置using UnityEngine; using System.Collections; public class ExampleScript : MonoBehaviour { public Animation anim; void Start() { // Walk backwards anim["Walk"].speed = -1.0f; // Walk at double speed anim["Walk"].speed = 2.0f; } }），但它在浏览器中无法正常工作。

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

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

cursor:none

其他说明

我尝试将<!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>设置在与全屏（例如子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上

1 个答案: