更改整个页面的鼠标光标？答案

【问题标题】：Change Mouse Cursor for whole page?更改整个页面的鼠标光标？
【发布时间】：2011-10-12 15:36:02
【问题描述】：

我有一个拖动 UI 程序，其中可拖动元素上的鼠标光标在单击时变为抓手。

问题是，我允许拖动发生在屏幕上的任何地方，并且光标会在锚标签上发生变化，等等......

我试过$('*').addClass('grabbing')，但它真的很贵。

有没有简单的代码有效的方法来处理这个问题？

【问题讨论】：

【解决方案1】：

在 CSS 级别进行：

* {
   cursor: pointer;
}

在 jquery 中执行它会强制它迭代 dom 中的每个节点并重写其 css 类。在长文档上，这是一种巨大的时间浪费。

【讨论】：

但这将始终处于活动状态。只有当鼠标按下时光标才需要改变。它需要以某种方式在 Javascript 中发生。
您可以通过javascript动态添加/删除css规则。只需从 onmousedown/onmouseup 中执行此操作，它应该比从页面上的每个 dom 节点添加/删除类更快。
@Mark B 酷。你能举个例子来提供一个新的答案吗？我会试一试，如果它工作正常，我会标记它。
与其他答案相同的问题 - 如果指定光标，其他 CSS 元素和类将覆盖此问题。
@mike：总是有!important。

【解决方案2】：

试试这个

$('body').addClass('grabbing');

或

$(document).addClass('grabbing');

//编辑答案

$('body').mousedown(function(e){
    $(this).css({'cursor':'pointer'});
}).mouseup(function(e){
    $(this).css({'cursor':'auto'});
});

如果你打开了firebug，你可以看到body style标签的变化。但有些是如何不起作用的。您可以将其作为参考，并尝试类似的方法获取解决方案。

【讨论】：

【解决方案3】：

虽然这不是对这个问题的直接回答，但我想提请注意，我们可以以不同的方式解决问题。

通过在除拖放区之外的所有内容之上放置一个空的全屏 div，在mousedown 事件之后激活它。所以我们可以通过该div的:hover类简单地改变整个屏幕的光标。

【讨论】：

【解决方案4】：

我尝试了其中的大部分，但并非所有元素都会显示光标。快速而肮脏的方法是迭代整个 dom 并为每个元素设置光标。

document.querySelectorAll('*').forEach(function(node) {
    node.style.cursor = 'progress';
});

在此处执行 ajax 或其他任何内容....后跟：

document.querySelectorAll('*').forEach(function(node) {
    node.style.cursor = 'default';
});

【讨论】：

【解决方案5】：

当你需要它时，你可以调用一行javascript：

document.body.style.setProperty('cursor', 'pointer');

当你想再次撤消时，你可以再执行一行：

document.body.removeAttribute('style');

【讨论】：