在鼠标移动之前，使用jQuery / CSS设置的鼠标光标不会改变
在我的代码中，我使用jQuery / CSS来设置和取消设置以下代码的'等待'鼠标光标：
function setWaitCursor() {
$('body').css('cursor', 'wait');
}
function setDefaultCursor() {
$('body').css('cursor', '');
}
我使用这段代码来改变鼠标光标以进行长时间操作：
setWaitCursor();
... do stuff that takes a few seconds ...
setDefaultCursor();
但是，除非您移动鼠标，否则此代码似乎无法工作（至少对于Win 10上的Chrome）。 如果在setDefaultCursor被调用后鼠标没有移动，光标将显示'wait'光标直到鼠标移动（反之亦然）。
例如：https：//jsfiddle.net/antonyakushin/0jv6rqkf/
在这个小提琴中，光标在链接被点击后改变2秒。 如果您点击链接时不移动鼠标，光标不会改变。
解决此问题的最佳方法是什么，以便即使鼠标未移动，光标也会更改？
某些元素具有默认的光标样式。 所以，如果改变光标样式，我们也需要改变它。
$(document).ready(function() {
function setWaitCursor(elem) {
elem.css('cursor', 'wait');
$('body').css('cursor', 'wait');
}
function setDefaultCursor(elem) {
elem.css('cursor', '');
$('body').css('cursor', '');
}
$('#testLink').on('click', function() {
var x = $(this)
setWaitCursor(x);
setTimeout(function() {
setDefaultCursor(x);
}, 5000);
return false;
});
});
演示小提琴
只需将body更改为* 。 它将适用于所有元素。
Fiidle演示
代码片段：
$(document).ready(function() {
function setWaitCursor() {
$('*').css('cursor', 'wait');
}
function setDefaultCursor() {
$('*').css('cursor', '');
}
$('#testLink').on('click', function() {
setWaitCursor();
setTimeout(function() {
setDefaultCursor();
}, 2000);
return false;
});
});body {
min-width: 500px;
min-height: 500px;
background-color: gray;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="mouseContainer">
<a href="#" id="testLink">Test Link</a>
</div>上一篇: Mouse cursor set using jQuery/CSS not changing until mouse moved