鼠标指针不停留在铬全屏div

我想做一个HTML元素全屏（一个div），并且指针保持隐藏状态。鼠标指针不停留在铬全屏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>

其他说明

我试图比被制作全屏（如一个孩子DIV）不同的元素上设置cursor:none，但这也没有帮助。

指针锁定API看起来像是大规模的矫枉过正，我们宁愿不需要额外的用户权限，看起来应该很容易在HTML/CSS中执行。

浏览器错误引用

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

相比FF 51和Mac OS X上

来源

2017-02-27 abought

1）铬56光标可以你希望它是任何图像，使用声明：

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>

来源

2017-02-28 14:24:14 Rounin

有趣。我不确定为什么内联图像可以解决这个问题（特别是当替代方法是'cursor：none'时），但它似乎对初步测试有帮助。也许是一个奇怪的问题，但是......谢谢！ – abought

鼠标指针不停留在铬全屏div

回答

相关问题