我使用nw.js的html / css / js桌面应用程序,不能完全删除鼠标光标在全屏模式.
我已经通过设置css属性cursor来取消它:none,margin:0,padding:0在body / html上.还有工具栏:false和全屏:true在package.json中设置.
但是光标在屏幕的所有边缘上可见几个像素(图片如下).
奇怪的行为,有人知道如何彻底删除它吗?
注意:这只是NW.js中的一个问题,因为它在所有浏览器以及xulrunner中都可以完美运行,因为我们在公司从xulrunner迁移到node-webkit(nw.js),所有应用程序都有这个问题.
解决方法
我怀疑另一个元素正在应用光标: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>
您可以看到,该元素获取正常的光标,因为它具有一个光标:自动规则.
由于你没有提供你的代码,所以我不知道得到这个规则的哪个元素,你可以在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/