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

在我的网站上，我有一些CSS类，当你鼠标hover在它们上面时，它们会设置一个固定类型的光标。 当我在页面的任何地方进行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; } 

如果将鼠标hover在此类中的对象上，并且启动了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

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

基本上，包装器的所有子进程都将获得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

1. 将空元素div#wait-overlay到您的页面。 我建议你在html文档的末尾添加它，就在结束元素之前。

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-overlay是空div，因此它不可见，因为它位于页面的末尾，所以它不会影响任何内容。

2. 但是，如果我们将类active添加到此div，它会覆盖整个页面，并且由于非常高的z-index覆盖了页面上的所有内容。 这样做的另一个好处是页面上的所有内容都变得无法点击。

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

Answer 5

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

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

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

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

Answer 6

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

诀窍。