使用jQuery/CSS设置的鼠标光标在鼠标移动之前不会更改
使用jQuery/CSS设置的鼠标光标在鼠标移动之前不会更改
提问于 2016-04-13 19:47:15
在我的代码中，我使用jQuery/CSS通过以下代码设置和取消设置'wait‘鼠标光标：
function setWaitCursor() {
$('body').css('cursor', 'wait');
}
function setDefaultCursor() {
$('body').css('cursor', '');
}我使用以下代码来更改鼠标光标以执行长操作：
setWaitCursor();
... do stuff that takes a few seconds ...
setDefaultCursor();然而，除非你移动鼠标，否则这段代码似乎不起作用(至少在Win10上的Chrome上是这样)。如果在调用setDefaultCursor之后没有移动鼠标，光标将显示“等待”光标，直到鼠标移动为止(反之亦然)。
在此小提琴中，单击链接后，光标会更改2秒。如果在单击链接时未移动鼠标，则光标不会更改。
解决这个问题的最好方法是什么，这样即使鼠标不移动，光标也会改变？
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-04-13 19:55:36
某些图元具有默认光标样式。所以在改变光标样式的同时，我们也需要改变这一点。
$(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;
});
});Stack Overflow用户
发布于 2018-08-07 03:59:37
尽管这不是此特定问题的答案，但此行为可能会发生：
- On Chrome
- 与DevTools打开(这很可能是为了调试此问题)
解决方案很简单，就是使用。
Stack Overflow用户
发布于 2016-04-13 20:29:29
只需将body更改为*。它将适用于所有元素。
代码片段：
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36597412
复制相关文章
相似问题