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类时，所有内容都将显示等待光标。

Answer 2

如果你有一个包装器或容器：

<script type="text/javascript">
$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
    $('div#wrapper').addClass('wait');
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
    $('div#wrapper').removeClass('wait');
});
</script>

<style type="text/css">
    div#wrapper.wait * {
        cursor: wait !important;
    }
</style>

基本上，包装器的所有子项都将获得cursor: wait条件!important。

Answer 3

2014年的另一个答案：

解决方案如果您至少有一个样式表，请更改它！

更改CSS样式表：

sh = document.styleSheets[0]
Wait_a_bit="* {cursor: wait !important}"
sh.insertRule(Wait_a_bit, 0)

在你的ajax之前

然后删除它：

sh.deleteRule(0)

Answer 4

在页面中添加空元素div#wait-overlay。我建议你在html文档的末尾添加它，就在结束<body>元素之前。

像这样设置此元素的样式（.active是故意的）：

div#wait-overlay.active
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: wait;
    z-index: 100000;
    background: black;
    opacity: 0;
}

然后添加以下javascript：

$(document).ajaxStart(function () {
    $('#wait-overlay')
        .addClass('active')
        .animate({opacity: 0.6});
});

$(document).ajaxStop(function () {
    $('#wait-overlay')
    .animate(
        {
            opacity: 0
        },
        400,
        function () { $(this).removeClass('active'); }
    );
});

<强>解释

div#wait-overlay是空div，因此它不可见，因为它位于页面的末尾，所以不会影响任何内容。
但是，如果我们将类active添加到此div，它会延伸到整页，感谢非常高z-index涵盖页面上的所有内容。这样做的另一个好处是页面上的所有内容都变得无法点击。
javascript会自动在ajax start上添加.active类，并在ajax完成时将其删除。还要感谢调用animate，页面在ajax开始时逐渐变暗，当ajax完成时，它会恢复正常。

Answer 5

问题是该类将覆盖游标的文档值，为避免这种情况，你应该确保所有元素在悬停时都会显示等待符号。

你最好的选择是当你想要鼠标的等号时，在body元素中添加一个类，当那个类出现时，从CSS开始，你设置所有其他类来显示等号。

当ajax完成后，从body标签中删除该类，并且将恢复具有各种光标样式的原始元素类。

$(document).ajaxStart(function () {
    $('body').addClass('wait');
});

$(document).ajaxStop(function () {
    $('body').removeClass('wait');
});



<style type="text/css">
    body.wait .move {
        cursor: wait;
    }
</style>

Answer 6

    $(document).ajaxStart(function () {
        $('*').css('cursor', 'wait');
    });

    $(document).ajaxStop(function () {
        $('*').css('cursor', '');
    });

诀窍。

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

6 个答案: