Javascript 将光标设置为等待的最简单方法，然后让所有元素恢复原状
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10305392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simplest way to set cursor to wait, then have all elements revert back
提问by Jay Sun
In my website, I have a few CSS classes that set a fixed type of cursor when you mouse over them. I want to set the cursor to the wait image when I make an AJAX call anywhere on the page and then have it revert back to whatever cursor it should be after the AJAX call is complete.
在我的网站中，我有一些 CSS 类，当您将鼠标悬停在它们上方时，它们会设置固定类型的光标。当我在页面上的任何位置进行 AJAX 调用时，我想将光标设置为等待图像，然后在 AJAX 调用完成后让它恢复到它应该是的任何光标。
I tried:
我试过：
$(document).ajaxStart(function () {
document.body.style.cursor = 'wait';
});
$(document).ajaxStop(function () {
document.body.style.cursor = 'auto';
});
This doesn't work when my mouse is over a DOM object with a CSS class that changes the cursor and I'm stumped on how to make it do so.
当我的鼠标悬停在一个带有改变光标的 CSS 类的 DOM 对象上时，这不起作用，我很难过如何让它这样做。
Currently I have a class:
目前我有一堂课：
.pills a:hover
{
background-color: #0069D6;
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
text-decoration:none;
cursor:pointer;
}
If you mouse over the object in this class, and an Ajax call starts, the cursor still stays as a pointer.
如果您将鼠标悬停在此类中的对象上，并且 Ajax 调用开始，光标仍将保持为指针。
回答by James Montagne
You can use a combination of toggling a class on the bodyand !important.
您可以结合使用在body和上切换类!important。
$("button").click(function(){
$("body").toggleClass("wait");
return false;
});
body.wait, body.wait *{
cursor: wait !important;
}
When body has the waitclass, everything will show the wait cursor.
当 body 有wait类时，一切都会显示等待光标。
回答by Robin Castlin
if you have a wrapper or container:
如果您有包装纸或容器：
<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>
Basicly all children to the wrapper will get the cursor: waitwith the !importantcondition.
Basicly所有儿童的包装将得到cursor: wait与!important条件。
回答by halfbit
an other answer 2014:
2014 年的另一个答案：
solution if you have at least one style sheet, change it!
解决方案 如果您至少有一个样式表，请更改它！
change the CSS Style sheet:
更改 CSS 样式表：
sh = document.styleSheets[0]
Wait_a_bit="* {cursor: wait !important}"
sh.insertRule(Wait_a_bit, 0)
before your ajax and remove it afterward:
在您的 ajax 之前，然后将其删除：
sh.deleteRule(0)
回答by GoFree
Add an empty element
div#wait-overlayto your page. I suggest you add it at the end of your html document, just before the closing<body>element.Set the style of this element like this (The
.activeis there on purpose):div#wait-overlay.active { position: fixed; top: 0; bottom: 0; left: 0; right: 0; cursor: wait; z-index: 100000; background: black; opacity: 0; }Then add the following 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'); } ); });
div#wait-overlay向页面添加一个空元素。我建议您将它添加到 html 文档的末尾，就在结束<body>元素之前。像这样设置这个元素的样式（这
.active是故意的）：div#wait-overlay.active { position: fixed; top: 0; bottom: 0; left: 0; right: 0; cursor: wait; z-index: 100000; background: black; opacity: 0; }然后添加以下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'); } ); });
Explanation:
解释：
The
div#wait-overlayis empty div, therefore it is not visible and since it is at the end of the page, it does not affect anything.However, if we add class
activeto this div, it stretches over the whole page and thanks to very highz-indexcovers everything on the page. The added benefit of this is that everything on the page becomes unclickable.The javascript adds the
.activeclass on ajax start automatically and removes it when ajax finishes. Also thanks to callinganimate, the page gradually darkens on ajax start and when ajax finishes, it returns back to normal.
该
div#wait-overlay是空的div，因此它是不可见的，因为它是在页面的结束，它不会造成任何影响。然而，如果我们
active向这个 div添加类，它会延伸到整个页面，并且由于非常高的z-index覆盖了页面上的所有内容。这样做的额外好处是页面上的所有内容都无法点击。javascript
.active在 ajax 启动时自动添加类，并在 ajax 完成时将其删除。另外由于调用animate，页面在 ajax 开始时逐渐变暗，当 ajax 完成时，它恢复正常。
回答by Max W. Lamda
$(document).ajaxStart(function () {
$('*').css('cursor', 'wait');
});
$(document).ajaxStop(function () {
$('*').css('cursor', '');
});
does the trick.
诀窍。
回答by GillesC
The problem is that the class will overwrite the document value for the cursor, to do avoid this you should make sure all element when hovered will show the wait symbol.
问题是该类将覆盖光标的文档值，为了避免这种情况，您应该确保悬停时所有元素都会显示等待符号。
Your best bet is to add a class to the body element when you want the wait symbol for the mouse, that way from CSS when that class is present you set all other classes to show the wait symbol.
当您想要鼠标的等待符号时，最好的办法是在 body 元素中添加一个类，当该类存在时，从 CSS 中可以将所有其他类设置为显示等待符号。
When ajax is finished remove the class from the body tag and the original elements class with various cursor style will be reverted.
当 ajax 完成时，从 body 标签中删除类，具有各种光标样式的原始元素类将被恢复。
$(document).ajaxStart(function () {
$('body').addClass('wait');
});
$(document).ajaxStop(function () {
$('body').removeClass('wait');
});
<style type="text/css">
body.wait .move {
cursor: wait;
}
</style>
