如何使用jquery隐藏鼠标光标

Question

如何使用jQuery在整个网页上隐藏鼠标光标。我尝试了这个：

$(document).ready(function(){
        $(body).css({
           'cursor' : 'none'
        });
});

但是这种方法在所有浏览器中都不起作用。是否有插件可以实现这一点。

提前致谢。

- KillerFish

---

你在原始代码中的body部分使用了单引号吗？ - kobe

@gov：这里我忘记加单引号了，但是在我的项目中已经加上了。 - KillerFish

通过上述代码...仅支持Firefox... - KillerFish

你不应该在游标周围加单引号。 - Jo Albright

Answer 1

$('body').css('cursor', 'none');

- Brian Rose

---

'body' 周围的引号很重要。 - Brian Rose

此外，当悬停在Flash电影上时，这将无法工作 - 需要在电影本身中处理。此外，对于在其CSS中明确命名光标的元素，这也不起作用。请参见http://bugs.jquery.com/ticket/2066。 - Brian Rose

Answer 2

我敢打赌，这与jQuery方法无关，实际上与您页面的CSS有关。请确保（使用Firebug），body元素实际上在页面上可见，内容可能因为默认情况下overflow设置为auto而出现问题，但您还需要将body的高度和宽度设置为100％，以确保当您的鼠标移动屏幕时，它会真正调用body.mouseover()。

这里是一个有效的示例»http://jsfiddle.net/Ilmv/XQmqe/

- Ben Everard

---

@ILMV：Google Chrome 不支持这个......在 Chrome 中光标可见......即使在你的工作示例中也是如此。 - KillerFish

很有趣，它之前对我起作用了...而且我正在使用Google Chrome。我目前在jsFiddle上遇到问题，我会回来找你的。 - Ben Everard

我正在使用 Google Chrome 8.0.552.215 beta。 - KillerFish

我在Ubuntu 10.04上使用完全相同的版本，它对我来说完美地工作:S - Ben Everard

我正在Windows上使用它，我不认为它与操作系统有关。 - KillerFish

Answer 3

另一种解决方案是通过加载自定义的透明ICO/PNG文件作为光标来实现。

cursor: url('my-transparent-cursor.ico');

现在用户有了光标，但是是透明的，看不见。这只是我的个人意见。

- Manny

Answer 4

我认为你可以使用 div 元素制作叠加层，当页面准备好后，将其可见性设置为块状。

HTML 代码：

<div>Test</div>

CSS 代码：

div {
  position: fixed;
  left: 0%;
  width: 100%;
  height: 100%;
  cursor: none;
  visibility: block;
}

希望能对你有所帮助... 我在jsfiddle上测试过了，对我有效。

也许这就是你要找的。

- Joko Wandiro

---

@killerfish：我没有在Chrome上测试过，但我使用的是div而不是body...为什么它不起作用.. - Joko Wandiro

Answer 5

使用一个透明的div覆盖层（绝对定位，宽高100％，z-index为正），并将光标设置为none。然后使用jQuery来切换它的开/关状态，这个怎么样？

- PseudoNinja

---

根据文档的结构，将位置设置为“fixed”而不是“absolute”可能是一个好主意。 - Victor Zamanian

@Victor，那可能是个主意。我计划中唯一的问题是如果页面比窗口长，他们就可以滚动出清晰的div。移除overflow！ - PseudoNinja

Answer 6

应该在所有浏览器中都能正常工作。在Firebug中检查光标出现的元素，看是否有显式的“cursor：pointer;”或等效设置。

- Jamie