Question

我有一个包含一些javascript代码和canvas元素的html文档。

在javascript位中，我使用以下代码隐藏鼠标指针：

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

发生了一些非常奇怪的事情：鼠标指针仅在鼠标悬停在画布元素上时隐藏，但在鼠标悬停在身体其他部分时可见。

我在Firefox 41和Chrome 46中对此进行了测试。完全相同。

有人知道为什么会发生这种情况，以及如何防止这种情况发生？

提供更多上下文信息：我正在创建一个交互式页面，用户首先需要用鼠标点击某些按钮（因此鼠标指针最初需要可见），然后有一段交互时间仅通过按键发生，鼠标指针分散注意力，所以我想让它消失。然后，我需要恢复鼠标指针，以便用户再次点击按钮。

谢谢！

Answer 1

<强> CSS

您是否考虑在CSS中使用* { cursor: none; }，它应该在浏览器窗口中将光标移出整个屏幕，但我不确定您为什么要这样做。

Answer 2

这是因为您的<body>只有画布元素的高度+边距：

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

body{border: 1px solid;}
canvas {
    background: #000;
}

<canvas></canvas>

您可以通过将身体的宽度和高度设置为100vw和100vh来解决此问题：

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

body{
    height: 100vh;
    width: 100vw;
}
html, body{
    margin: 0
}
canvas {
    background: #000;
}

<canvas></canvas>