21

在我的网站中，我有一些 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 调用，则光标仍然作为指针停留。

4

6 回答 6

40

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

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

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

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

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

于 2012-04-24T20:30:06.760 回答
3

如果您有包装器或容器：

<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。

于 2012-04-24T20:27:35.760 回答
1

2014年的另一个答案：

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

更改 CSS 样式表：

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

在您的 ajax 之前，然后将其删除：

sh.deleteRule(0)
于 2014-02-19T22:06:02.247 回答
1

  1. div#wait-overlay向您的页面添加一个空元素。我建议您将其添加到 html 文档的末尾，就在结束<body>元素之前。

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

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

  3. 然后添加以下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'); }
    );
});

解释：

  1. 是空的div#wait-overlaydiv，因此它是不可见的，并且因为它位于页面的末尾，所以它不会影响任何东西。

  2. 但是，如果我们active向这个 div 添加类，它会延伸到整个页面，并且由于非常高地z-index覆盖了页面上的所有内容。这样做的额外好处是页面上的所有内容都变得不可点击。

  3. javascript.active在 ajax 启动时自动添加类，并在 ajax 完成时将其删除。也感谢调用animate，页面在 ajax 启动时逐渐变暗，当 ajax 完成时，它恢复正常。

于 2017-04-23T22:43:37.567 回答
0

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

你最好的办法是在你想要鼠标的等待符号时向 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>
于 2012-04-24T20:27:46.143 回答
0 
    $(document).ajaxStart(function () {
        $('*').css('cursor', 'wait');
    });

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

成功了。

于 2017-07-12T07:55:12.010 回答