Question

我有这个页面做一些时髦的数据库工作，需要几秒钟来处理，同时我想设置一个"wait"光标，这样用户就不会翻转并继续点击按钮。我看了

document.body.style.cursor = "wait"

事情，这个问题是它只在鼠标位于页面主体上时才起作用（即如果它在按钮上方仍显示正常指针）。如何设置它以便无论页面上的鼠标位于何处，它都会显示一个等待图标？

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

编辑：第一个答案很有效，除了在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的东西。

编辑2019：不要使用jQuery，使用classList

Answer 2

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

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

Answer 3

样式应该通过CSS处理，如W3C.com所述：

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

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

body.waiting * { cursor: wait; }

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

添加课程名称＆＃39;等待＆＃39;到文件正文：

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

删除班级名称＆＃39;等待＆＃39;来自文件正文：

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

Answer 4

不是问题的答案，而是实现目标的方法。

加载时可以看到div（请参阅下面的类）。

确保没有元素可访问，灰色显示表示这一点。
你可以添加一个动画gif来表示正在进行的事情，而不是光标。

.loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}

Answer 5

默认情况下不继承游标的任何元素（如按钮）都需要将光标设置为继承：

someButton.style.cursor = 'inherit';

要返回元素的默认值（并且不使用强制游标破坏:hover之类的东西），请将其设置为空字符串：

document.body.style.cursor = '';

Answer 6

如果您对使用JQuery感到满意，那么解决这个问题的快捷方法就是使用：

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

我不知道这有多优雅，但它一直在为我工作，

Answer 7

我尝试了一切，但最终这个jquery起作用了，特别是如果您想在所有元素上等待光标，包括按钮和链接。

在.ts文件的顶部定义

declare var $: any;

，然后在任何需要的地方等待光标：

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

并删除等待：

$('*').css('cursor','auto');

JavaScript游标更改（并再次更改）

7 个答案: