javascript - 设置游标等待的最简单方法，然后让所有元素恢复原状

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 上切换类。

http://jsfiddle.net/UGwmv/2/

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

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

当 body 有 wait 类时，一切都会显示等待光标。