小开

最佳答案

使用 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>

尽管如此，还是要确保你真的想要隐藏光标。它可能会惹恼人们。

小开

我用透明的 * 。将1px 缩放到1px，但它看起来像个小点。: (我认为这是我能做的最好的跨浏览器的事情。对于‘ cursor’属性，CSS2.1没有‘ none’值——它是在 CSS3中添加的。

小开

如果你想用 CSS 做:

#ID { cursor: none !important; }

小开

指针锁定 API

虽然 cursor: none CSS 解决方案肯定是一个坚实和简单的 解决办法，如果你的实际目标是拿开默认光标，而你的网络应用程序正在使用，或实现你的原始鼠标移动的 自己的解释(例如 FPS 游戏) ，你可能要考虑使用指针锁定 API代替。

您可以在一个元素上使用 RequestPointerLock来删除游标，并将所有 mousemove事件重定向到该元素(可以处理也可以不处理) :

document.body.requestPointerLock();

要释放锁，可以使用 ExitPointerLock:

document.exitPointerLock();

附加说明

没有光标，真的

这是一个非常强大的 API 调用。它不仅使您的光标不可见，而且 它实际上删除了操作系统的本机游标。在释放指针锁之前，您不能选择文本，或者用鼠标执行 什么都行操作(除非在代码中听到一些鼠标事件)(在某些浏览器中使用 exitPointerLock或按下 ESC)。

也就是说，您不能将光标留在窗口中，让它再次显示，因为没有光标。

限制

如上所述，这是一个非常强大的 API 调用，因此只允许响应一些直接的用户交互在网络上，如点击; 例如:

document.addEventListener("click", function () {
document.body.requestPointerLock();
});

此外，除非设置了 allow-pointer-lock权限，否则 requestPointerLock将无法在沙箱 iframe中工作。

用户通知

有些浏览器会在锁启用之前提示用户进行确认，有些浏览器只是显示一条消息。这意味着指针锁可能不会在调用后立即激活。但是，可以通过监听调用 requestPointerLock的元素上的 pointerchange事件来监听指针锁定的实际激活:

document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});

大多数浏览器只显示一次消息，但火狐偶尔会在每次通话中发送垃圾邮件。AFAIK，这只能通过用户设置处理，参见在 Firefox 中禁用指针锁定通知。

听老鼠的原始动作

指针锁定 API 不仅删除鼠标，而且将原始鼠标移动数据重定向到调用的元素 requestPointerLock。只需使用 mousemove事件，然后访问事件对象上的 movementX和 movementY属性，就可以监听到这些信息:

document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});

小开

对于整个 html 文档，请尝试这样做

html * {cursor:none}

或者如果一些 css 覆盖您的光标: 没有使用! 重要的

html * {cursor:none!important}

小开

如果你想隐藏光标在整个网页，使用 body将不会工作，除非它涵盖整个可见的网页，这并不总是如此。要确保光标隐藏在页面的任何位置，请使用:

document.documentElement.style.cursor = 'none';

重新启动它:

document.documentElement.style.cursor = 'auto';

具有静态 CSS 符号的类似符号是 html {cursor:none}(或者，取决于您确切想要的 ABC1/:root {cursor:none})。

是否可以使用 CSS 或 Javascript 将光标隐藏在网页中？

指针锁定 API

附加说明