设置光标等待的最简单方法，然后让所有元素还原

Question

在我的网站中，我有一些CSS类，当您将鼠标悬停在它们上时，它们会设置固定类型的光标。我想在页面上的任何地方进行AJAX调用时将光标设置为等待图像，然后在AJAX调用完成后将其恢复为应该使用的光标。

我试过了：

$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
});

当我的鼠标悬停在带有更改光标的CSS类的DOM对象上并且无法实现此操作时，此方法将无效。

目前，我有一堂课：

.pills a:hover
{
    background-color: #0069D6;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    text-decoration:none;
    cursor:pointer;
}

如果将鼠标悬停在此类中的对象上，并且开始Ajax调用，则光标仍然停留在指针上。

Answer 1

您可以使用在切换一类的组合body和!important。

$("button").click(function(){
   $("body").toggleClass("wait");
   return false; 
});



body.wait, body.wait *{
    cursor: wait !important;   
}

当body具有wait该类时，所有内容都会显示等待光标。