整个页面更改鼠标光标?

时间:2011-10-12 15:36:03

标签: javascript jquery html css

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

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

我已经尝试了$('*').addClass('grabbing'),但这真的很贵。

有一种简单易用的代码处理方法吗?

4 个答案:

答案 0 :(得分:6)

在CSS级别执行:

* {
   cursor: pointer;
}

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

答案 1 :(得分:1)

试试这个

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

OR

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

// EDITED ANSWER

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

如果启用了firebug,您可以看到正文样式标记中的更改。但有些如何不起作用。您可以将其作为参考,并尝试类似的方法获得解决方案。

答案 2 :(得分:0)

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

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

在这里执行ajax或其他操作。...接着:

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

答案 3 :(得分:0)

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

通过将空的全屏div放在除拖放区之外的所有内容之上,在mousedown事件之后将其激活。因此,我们只需通过该div的:hover类来更改整个屏幕的光标即可。