我想在显示用于在建筑物大厅中显示信息的网页时隐藏光标。它根本不必是交互式的。我尝试更改光标属性并使用透明光标图像，但没有解决我的问题。
有谁知道这是否可以做到？我想这可以被认为是对一个不知道他在点击什么的用户的安全威胁，所以我不是很乐观......谢谢！
是否可以使用 CSS 或 Javascript 在网页中隐藏光标？
IT技术
javascript
html
css
2021-01-20 02:25:58
6个回答
使用 CSS：
selector { cursor: none; }
一个例子：
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>要在 Javascript 中的元素上设置它，您可以使用以下style属性：
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>
如果你想在整个身体上设置这个：
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>
不过，请确保您真的想隐藏光标。它真的可以惹恼人们。
指针锁API
虽然cursor: noneCSS 解决方案绝对是一种可靠且简单的解决方法，但如果您的实际目标是在使用 Web 应用程序时移除默认光标，或者实现您自己对原始鼠标移动的解释（例如，对于 FPS 游戏），您可能会想考虑改用指针锁 API。
您可以在元素上使用requestPointerLock来移除光标，并将所有mousemove事件重定向到该元素（您可能会也可能不会处理）：
document.body.requestPointerLock();
要释放锁，您可以使用exitPointerLock：
document.exitPointerLock();
补充笔记
没有光标，真正的
这是一个非常强大的 API 调用。它不仅使您的光标不可见，而且实际上删除了您操作系统的本机光标。在释放指针锁定之前（通过在某些浏览器中使用或按下），您将无法选择文本或使用鼠标执行任何操作（除了在代码中侦听某些鼠标事件）。exitPointerLockESC
也就是说，您不能离开带有光标的窗口以使其再次显示，因为没有光标。
限制
如上所述，这是一个非常强大的 API 调用，因此只允许响应网络上的一些直接用户交互，例如点击；例如：
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
此外，除非设置了权限，requestPointerLock否则无法在沙盒中工作。iframeallow-pointer-lock
用户通知
有些浏览器会在锁定之前提示用户确认，有些浏览器只会显示一条消息。这意味着指针锁定可能不会在调用后立即激活。但是，可以通过侦听被调用pointerchange元素上的事件来侦听指针锁定的实际激活requestPointerLock：
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
大多数浏览器只会显示一次消息，但 Firefox 偶尔会在每次调用时发送垃圾消息。AFAIK，这只能通过用户设置解决，请参阅在 Firefox 中禁用指针锁定通知。
聆听原始鼠标移动
Pointer Lock API 不仅移除鼠标，而且将原始鼠标移动数据重定向到requestPointerLock被调用的元素。这可以通过使用mousemove事件来监听，然后访问事件对象上的movementX和movementY属性：
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
如果您想在整个网页中隐藏光标，body除非它覆盖整个可见页面，否则使用将不起作用，但情况并非总是如此。要确保光标隐藏在页面中的任何地方，请使用：
document.documentElement.style.cursor = 'none';
要重新启用它：
document.documentElement.style.cursor = 'auto';
静态CSS符号的模拟是通过回答帕维尔Salaquarda（实质：html * {cursor:none}）
我是用透明的 *.cur 1px 到 1px 做的，但它看起来像小点。:( 我认为这是我能做的最好的跨浏览器的事情。CSS2.1 的 'cursor' 属性没有值 'none' - 它是在 CSS3 中添加的。这就是为什么它不是在任何地方都可用。
如果你想在 CSS 中做到这一点：
#ID { cursor: none !important; }
其它你可能感兴趣的问题