JavaScript 光标更改（并再次更改回来）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5175740/
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
JavaScript Cursor Change (and change back again)
提问by Jordan
I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait"cursor so the user doesn't flip out and keep clicking the button. I've looked at the
我有这个页面做一些时髦的数据库内容，需要几秒钟来处理，同时我想设置一个"wait"光标，这样用户就不会翻转并继续单击按钮。我看过了
document.body.style.cursor = "wait"
document.body.style.cursor = "wait"
thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?
事情，问题在于它仅在鼠标悬停在页面主体上时才有效（即，如果悬停在按钮上，仍会显示正常指针）。如何设置它以便无论鼠标在页面上的哪个位置，它都显示等待图标？
A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover"cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).
这个问题的第二部分是，一旦完成它，我该如何设置它？如果我将其重新设置为"default"，这似乎会覆盖"hover"我在 CSS 中设置的任何光标更改（因此在指定对象上时它不再变成手等）。
EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?
编辑：第一个答案效果很好，除了在 IE 中它不会刷新光标（因此您会注意到光标类型的变化），直到您实际移动光标。任何修复？
采纳答案by Hello71
For your first problem, try using cursor: wait !important;.
对于您的第一个问题，请尝试使用cursor: wait !important;.
For your second problem, the default cursor for elements is cursor: auto;, not cursor: default;or cursor: inherit;.
对于您的第二个问题，元素的默认光标是cursor: auto;, not cursor: default;or cursor: inherit;。
回答by Tom Roggero
What I suggest is two things: a) Better write a CSS like
我的建议是两件事：a）最好写一个像
body.waiting * { cursor: wait; }
b) Use the JS to handle the body class
b) 使用 JS 处理 body 类
/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want
You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.
您可能想要添加类而不是替换整个类属性，我建议为此使用类似 jQuery 的东西。
EDIT 2019: don't use jQuery for just this, use classList
编辑 2019：不要为此使用 jQuery，请使用classList
回答by happyt
The styling should be handled via CSS, as stated by W3C.com:
样式应通过 CSS 处理，如W3C.com 所述：
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
CSS 是用于描述网页呈现的语言，包括颜色、布局和字体。... HTML 与 CSS 的分离使得维护站点、跨页面共享样式表以及针对不同环境定制页面变得更加容易。这被称为结构（或：内容）与表示的分离。
As suggested by Tom Rogerro, add a line to your CSS file:
按照 Tom Rogerro 的建议，在您的 CSS 文件中添加一行：
body.waiting * { cursor: wait; }
However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.
但是，您的脚本不应覆盖整个类名列表。Tom 建议通过 jQuery 设置类名，但在这种情况下不需要 jQuery。简单的 Javascript 可以做到这一点。
To add a class name 'waiting' to the document body:
要将类名“等待”添加到文档正文：
document.body.classList.add('waiting');
To remove a class name 'waiting' from the document body:
从文档正文中删除类名“等待”：
document.body.classList.remove('waiting');
回答by Mahks
Not an answer to the question, but a way of achieving what is wanted.
不是问题的答案，而是实现想要的东西的一种方式。
Make a div (see class below) visible when you are loading.
加载时使 div（见下面的类）可见。
- ensures no element is accessible and dimmed display indicates this.
you can add an animated gif to indicate something is going on instead of the cursor.
.loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}
- 确保没有元素可访问，并且变暗的显示表明了这一点。
您可以添加动画 gif 来指示正在发生的事情而不是光标。
.loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}
回答by Delan Azabani
Any elements that don't inherit the cursor by default (such as buttons) will need to set the cursor to inherit:
默认情况下不继承光标的任何元素（例如按钮）都需要将光标设置为继承：
someButton.style.cursor = 'inherit';
To go back to the default for an element (and not break things like :hoverwith a forced cursor), set it to an empty string:
要返回元素的默认值（而不是像:hover强制光标那样破坏事物），请将其设置为空字符串：
document.body.style.cursor = '';
回答by ShudderPig
If you are happy using JQuery then a quick way to solve this would be to use:
如果您对使用 JQuery 感到满意，那么解决此问题的快速方法是使用：
$('*').css('cursor','wait')
I don't know how elegant this is but it has been working for me,
我不知道这有多优雅，但它一直对我有用，
回答by Ashish Gupta
I tried everything but finally this jquery worked, especially if you want wait cursor over all elements including buttons and links.
我尝试了所有方法，但最后这个 jquery 起作用了，特别是如果你想在所有元素上等待光标，包括按钮和链接。
define at the top of angular .ts file
在 angular .ts 文件的顶部定义
declare var $: any;
declare var $: any;
and then where ever you want wait cursor:
然后你想要等待光标的地方：
$('*').css('cursor','wait');
$('*').css('cursor','wait');
and remove wait:
并删除等待：
$('*').css('cursor','auto');
$('*').css('cursor','auto');
