将游标设置为等待，然后恢复所有元素的最简单方法
将游标设置为等待，然后恢复所有元素的最简单方法
提问于 2012-04-25 04:18:28
在我的网站上，我有几个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调用启动时，光标仍然作为指针存在。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-04-25 04:30:07
您可以在body和!important上组合使用切换类。
$("button").click(function(){
$("body").toggleClass("wait");
return false;
});body.wait, body.wait *{
cursor: wait !important;
}当body具有wait类时，所有内容都将显示等待光标。
Stack Overflow用户
发布于 2012-04-25 04:27:36
如果您有包装器或容器：
<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>基本上，包装器中的所有子对象都将获得带有!important条件的cursor: wait。
Stack Overflow用户
发布于 2014-02-20 06:06:02
2014年的另一个答案：
解决方案如果您至少有一个样式表，请更改它！
更改CSS样式表：
sh = document.styleSheets[0]
Wait_a_bit="* {cursor: wait !important}"
sh.insertRule(Wait_a_bit, 0)在你的ajax之前并在之后删除它：
sh.deleteRule(0)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10305392
复制相关文章
相似问题