JavaScript 光标更改（并再次更改回来）

Question

我有这个页面，它执行一些时髦的数据库操作，需要几秒钟的时间来处理，同时我想设置一个 "wait" 光标，这样用户就不会崩溃并保持单击按钮。我查看了

document.body.style.cursor = "wait"

的东西，问题是它仅在鼠标悬停在页面主体上时才起作用（即仍然显示正常指针（如果它位于按钮上方）。如何设置，使得无论鼠标在页面的哪个位置，都显示等待图标？

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

编辑：第一个答案效果很好，但在 IE 中它不会刷新光标（因此您会注意到光标类型的变化），直到您实际移动光标。有修复吗？

Answer 1

我的建议有两点：
a) 最好编写像这样的 CSS

body.waiting * { cursor: wait; }

b) 使用 JS 来处理主体类

/* 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 就可以做到这一点。

要将类名“waiting”添加到文档正文：

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

要从文档正文中删除类名“waiting”：

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

Answer 4

如果你很高兴使用 JQuery 那么解决这个问题的一个快速方法是使用：

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

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

Answer 5

不是问题的答案，而是实现目标的一种方式。

使 div（参见下面的类）在加载时可见。

• 确保没有任何元素可访问，并且变暗的显示屏会指示这一点。

• 您可以添加动画 gif 来代替光标来指示正在发生的事情。

  <代码>.loading{
  位置：固定；
  高度：100%；
  宽度：100%；
  左：0；
  顶部：0；
  光标：等待；
  背景：#000；
  不透明度：.5；
  z-index:999}

Answer 6

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

someButton.style.cursor = 'inherit';

要返回元素的默认值（并且不会破坏诸如 :hover 之类的内容强制光标），将其设置为空字符串：

document.body.style.cursor = '';

Answer 7

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

在 Angular .ts 文件顶部定义

declare var $: any;

然后在您想要等待光标的位置：

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

并删除等待：

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

Answer 8

要完全替换 CSS 切换行为，我们可以简单地使用 this 内联：

<img 
  src=https://cdn.sstatic.net/Img/unified/sprites.svg
  onmouseover="this.style.cursor = 'crosshair'"
>