画布和正文元素的奇怪光标行为答案

【问题标题】：strange cursor behaviour with canvas and body element画布和正文元素的奇怪光标行为
【发布时间】：2015-11-08 13:10:58
【问题描述】：

我有一个 html 文档，其中包含一些 javascript 代码和一个画布元素。

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

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

然后发生了一件非常奇怪的事情：只有当鼠标悬停在画布元素上时鼠标指针才会隐藏，但当鼠标悬停在主体的其余部分时才可见。

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

CSS

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

【讨论】：

【解决方案2】：

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

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

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

&lt;canvas&gt;&lt;/canvas&gt;

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

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

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

&lt;canvas&gt;&lt;/canvas&gt;

【讨论】：