无法在 nw.js 应用程序中完全删除鼠标光标

Posted 2023-02-24

【中文标题】无法在 nw.js 应用程序中完全删除鼠标光标

【英文标题】：Cannot completely remove mouse cursor in nw.js app

【发布时间】：2016-04-15 12:16:57

【问题描述】：

我将 nw.js 用于 html/css/js 桌面应用程序，无法在全屏模式下完全移除鼠标光标。

我已通过在 body/html 上设置 css 属性 cursor: none、margin: 0、padding: 0 将其删除。 toolbar: false 和 fullscreen: true 也在 package.json 中设置。 但是光标在屏幕的所有边缘都可以看到几个像素（如下图）。

奇怪的行为，有人知道如何完全删除它吗？

注意：这只是 NW.js 中的一个问题，因为它在所有浏览器和 xulrunner 中都能完美运行，因为我们在公司从 xulrunner 迁移到 node-webkit (nw. js) 所有应用程序都有这个问题。

【问题讨论】：

你的身体高度和宽度是否 100% 可能有一些像素超出身体。尝试将 css cursor:none 设置为 html 标签

就像我在描述中说的，cursor: none 是为 body 和 html 标签设置的。

光标是出现在特定区域还是随机出现？

你有代码或小提琴吗？

@swolfish 实际上是需要的。我们在这里猜测您可以在html 或body 或检查margin 等中做什么，如果您向我们展示您的代码会容易得多。

【参考方案1】：

我怀疑另一个元素正在应用 cursor:auto，实际上覆盖了您的 CSS 规则。

考虑以下基本示例：

html, body 
  background:#000; color:#FFF;
  padding: 0; margin: 0;
  text-align: center;
  cursor:none;


div 
  margin:2em;
  padding:1em;
  background:#555;
  cursor:auto;

<div>
  <p>This div has cursor:auto</p>
</div>

如您所见，该元素获得了普通光标，因为它具有cursor:auto 规则。 由于您没有提供代码，我无法确切知道哪个元素正在获取规则，您可以在 devtools 中检查以捕获它。否则，您可以使用以下 CSS 行覆盖所有光标规则：

*  cursor: none !important; 

看看实际效果：

html, body 
  background:#000; color:#FFF;
  padding: 0; margin: 0;
  text-align: center;
  cursor:none;


div 
  margin:2em;
  padding:1em;
  background:#555;
  cursor:auto;


*  cursor: none !important; 

<div>
  <p>This div has cursor:auto but gets overriden</p>
</div>

---

编辑：iframe

光标不能隐藏在通过iframe 加载的文档中。 iframe 需要在本地获取该 CSS 规则。

查看 iframe 演示：https://jsfiddle.net/azizn/rr7bsrc7/1/

【讨论】：

感谢您的精彩解释，但问题出在 NW.js 中，因为它以某种方式覆盖了样式，或者更好地说是忽略。

它可以用另一个更具体的 !important 规则覆盖。如果您有现场演示，我可以查看它，看看是什么原因造成的。

正如我在描述中所说，我们所有的应用程序在 node-webkit 中都有这个问题，在浏览器和 xulrunner 全屏中一切正常。但是，谢谢。 ;)

相关：***.com/questions/23936567/nodewebkit-app-hide-cursor 告诉我那条 JS 行是否解决了您的问题 document.body.style.cursor = 'none';

不幸的是，没有任何改变。 :(

【参考方案2】：

我也有同样的问题。我认为对我们来说最好的解决方案是切换到 Electron 或等到 nw.js 的稳定版本 0.13 发布。