JavaScript游标更改(并再次更改)

Question

我有这个页面做一些时髦的数据库的东西,需要几秒钟来处理,同时我想设置一个"wait"光标,以便用户不会翻转并继续点击按钮.我看过了

document.body.style.cursor = "wait"

事情,这个问题是它只有当鼠标位于页面主体上时才有效(即如果它在按钮上方仍显示正常指针).如何设置它以便无论页面上的鼠标位于何处,它都会显示等待图标？

这个问题的第二部分是,一旦完成它的事情,我该如何设置它？如果我将其设置回来"default",这似乎会覆盖"hover"我在CSS中设置的任何光标更改(因此当它超过指定对象时它不再成为一只手等).

编辑:第一个答案很好,除了在IE中它不刷新光标(所以你注意到光标类型的变化),直到你实际移动光标.任何修复？

Answer 1

我建议的是两件事:a)更好地编写CSS

body.waiting * { cursor: wait; }

b)使用JS来处理body类

/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want

你可能想要添加类而不是替换整个类属性,我建议使用像jQuery这样的东西.

Answer 2

对于第一个问题，请尝试使用cursor: wait !important;。

对于第二个问题，元素的默认光标是cursor: auto;，cursor: default;或cursor: inherit;。

Answer 3

如果您喜欢使用 JQuery，那么解决此问题的快速方法是使用：

$('*').css('cursor','wait')

我不知道这有多优雅，但它一直对我有用，

Answer 4

如W3C.com所述,样式应通过CSS处理:

CSS是用于描述网页呈现的语言,包括颜色,布局和字体.... HTML与CSS的分离使得维护站点,跨页面共享样式表以及将页面定制到不同环境变得更加容易.这被称为结构(或:内容)与表示的分离.

根据Tom Rogerro的建议,在CSS文件中添加一行:

body.waiting * { cursor: wait; }

但是,您的脚本不应覆盖整个类名列表.Tom建议通过jQuery设置类名,但在这种情况下不需要jQuery.简单的Javascript就可以做到这一点.

要向文档正文添加类名"等待":

document.body.classList.add('waiting');

要从文档正文中删除"等待"的类名:

document.body.classList.remove('waiting');