无论在何处，都将鼠标图标更改为“等待”

Question

我正在开发一个提取和更新客户信息的Web表单，它包含多个Ajax请求，这些请求有些慢（2-4秒）。每当页面等待结果时，我都添加了一个“等待”光标。但是，在很多时候页面等待请求时，用户要么将光标停留在按钮或表格上（通过制表符），以使光标停留在手/点击光标上，并且看不到加载轮。如果用户将鼠标移离按钮/表，它将更改为加载轮。我已经在使用jQuery进行ajax调用，所以我正在使用这段代码：

$(document.body).css({'cursor' : 'wait'});

有没有一种方法可以将图标强制置于加载轮上，无论它处于什么状态？

Answer 1

您可以使用!important覆盖按钮，链接，输入和正文上的CSS设置。

$("body,a,button,input").css("cssText", "cursor:wait !important;");

请注意上面的cssText的用法。

您也可以将*指定为选择器，但这很鲁ck。

Answer 2

建议您不要在页面上的多个元素中添加cursor: wait;，而是建议在您的正文中添加一个类。

$(document.body).addClass('loading');

---

在CSS中，您可以定义要显示在任何地方的加载光标。

.loading * {
  cursor: wait !important;
}