小开

我觉得你做不到。

但是，尝试更改滚动位置; 这可能会有所帮助。

小开

尝试为 cursor 属性使用正确的 css 值:

$('body').css('cursor','wait');

Http://www.w3schools.com/css/pr_class_cursor.asp

小开

最佳答案

这是两个浏览器目前的一个错误。更多细节在两个链接(也在评论中) :

Http://code.google.com/p/chromium/issues/detail?id=26723

还有

Http://code.google.com/p/chromium/issues/detail?id=20717

小开

我还没有尝试过这种方法，但是如果在改变 CSS 之前创建一个完全定位并填充视区的透明 div 会怎么样呢。然后，当主体上的 css 改变时，删除 div。这个 也许吧触发主体上的 mouseover 事件，也许吧使光标更新为最新的 CSS 值。

再说一次，我还没测试过，但值得一试。

小开

嘿，伙计们，我有一个基本的解决方案，可以在所有浏览器上运行。假设使用原型库。有人也可以把它写成普通的 Javascript。解决方案是在重新设置光标之后，在所有顶部设置一个 div，并稍微摇晃一下，使光标移动。这篇文章发表在我的博客 http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html上。

小开

我宁愿这样做更优雅:

$(function(){
$("html").bind("ajaxStart", function(){
$(this).addClass('busy');
}).bind("ajaxStop", function(){
$(this).removeClass('busy');
});
});

CSS:

html.busy, html.busy * {
cursor: wait !important;
}

资料来源: http://postpostmodern.com/instructional/global-ajax-cursor-change/

小开

$(’*’) . css (‘ cursor’，‘ wait’) ; 将在页面的任何地方(包括链接)工作

小开

我的解决办法是:

function yourFunc(){


$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
.mouseXPos(e.pageX + 1)
.mouseYPos(e.pageX - 1);
});


}

小开

Korayem 的解决方案在现代 Chrome 浏览器中100% 适用，在 Safari 浏览器中95% 适用，但在 Opera 和 IE 浏览器中不适用。

我稍微改进了一下:

$('html').bind('ajaxStart', function() {
$(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
$(this).removeClass('busy').addClass('notbusy');
});

CSS:

html.busy, html.busy * {
cursor: wait !important;
}


html.notbusy, html.notbusy * {
cursor: default !important;
}

现在它可以在 Chrome，Safari，Firefox 和 Opera 中100% 的情况下工作。我不知道该怎么处理 IE: (

小开

我受到了 Korayem 解决方案的启发。

Javascript:

jQuery.ajaxSetup({
beforeSend: function() {
$('body').addClass('busy');
},
complete: function() {
$('body').removeClass('busy');
}
});

CSS:

.busy * {
cursor: wait !important;
}

在 Chrome，Firefox 和 IE10上测试。光标在不移动鼠标的情况下变化。 IE10需要“重要”。

编辑: 在 AJAX 请求完成之后，您仍然需要在 IE10上移动光标(这样普通的光标就会出现)。在不移动鼠标的情况下出现“等待”光标。.

小开

从 jquery 1.9开始，你就可以使用应该 ajaxStart 和 ajaxStop 文档了。它们在 Firefox 中工作得很好。还没有在其他浏览器中测试过。

在 CSS 中:

html.busy *
{
cursor: wait !important;
}

在 javaScript 中:

// Makes the mousecursor show busy during ajax
//
$( document )


.ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )
.ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

小开

我相信这个问题(包括鼠标向下的问题)已经在 Chrome50中解决了。

但只有当你不使用开发工具! ！

关闭工具，光标应该会立即做出更好的响应。

小开

首先，您应该知道，如果您有一个指定给主体中任何标记的游标，$('body').css('cursor', 'wait');将不会更改该标记的游标(像我一样，我在所有锚标记上都使用 cursor: pointer;)。您可能想先看看我对这个特定问题的解决方案: 光标等待 Ajax 调用

对于光标只有在用户在 webkit 浏览器上移动鼠标时才更新的问题，正如其他人所说，没有真正的解决方案。

也就是说，如果动态地向当前光标添加 css spinner，仍然有一个解决方案。这不是一个完美的解决方案，因为您不确定光标的大小，以及旋转器是否会被正确定位。

跟随光标的 CSS 旋转器: 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳

$.fn.extend(
{
reset_on : function(event_name, callback)
{ return this.off(event_name).on(event_name, callback); }
});


var g_loader = $('.loader');


function add_cursor_progress(evt)
{
function refresh_pos(e_)
{
g_loader.css({
display : "inline",
left : e_.pageX + 8,
top : e_.pageY - 8
});
}
refresh_pos(evt);
var id = ".addcursorprog"; // to avoid duplicate events


$('html').reset_on('mousemove' + id, refresh_pos);


$(window).
reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}


function remove_cursor_progress(evt)
{
var id = ".addcursorprog";
g_loader.css('display', 'none');


$('html').off('mousemove' + id);
$(window).off('mouseenter' + id).off('mouseleave' + id);
}


$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

您将需要检查，如果它是一个触摸设备以及 var isTouchDevice = typeof window.ontouchstart !== 'undefined';

总之，您最好尝试在页面中添加一个静态微调器或其他显示加载过程的东西，而不是尝试使用光标。

小开

CodeSandbox 工作解决方案

其他一些解决方案并非在所有情况下都有效。我们可以通过两个 css 规则实现预期的结果:

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


.not-busy {
cursor: auto;
}

前者表示我们很忙，并应用于页面上的所有元素，试图覆盖其他游标样式。后者只适用于页面主体，只用于强制 UI 更新; 我们希望这个规则尽可能不具体，而且不需要适用于其他页面元素。

然后我们可以触发并结束忙状态，如下所示:

function onBusyStart() {
document.body.classList.add('busy');
document.body.classList.remove('not-busy');
}


function onBusyEnd() {
document.body.classList.remove('busy');
document.body.classList.add('not-busy');
}

总之，虽然我们必须更改游标样式来更新游标，但是直接修改 document.body.style.cursor或类似的操作在某些引擎(如 Webkit)上并不会产生预期的效果，直到游标被移动。使用类来影响更改更为健壮。但是，为了可靠地强制 UI 更新(同样，在某些引擎上) ，我们必须添加另一个类。似乎移除类与添加类的处理方式不同。

让浏览器光标从“等待”到“自动”，而不需要用户移动鼠标

CodeSandbox 工作解决方案