Javascript 加载页面时更改光标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3734559/
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
change cursor when loading page
提问by psoares
So what I trying to do is to change the cursor to wait when some page is loading.
所以我想做的是改变光标以在加载某个页面时等待。
I thought this was possible with css, I trying to achieve this when someone click on some link, so what I have is this:
我认为这可以通过 css 实现，当有人点击某个链接时，我试图实现这一点，所以我所拥有的是：
#something a:hover { cursor: hand; }
#something a:active { cursor: wait; }
But this doesn't work, it's a hand when hover links, and when for a second is wait, but I want this wait to continue until the new page appear.
但这不起作用，这是悬停链接时的手，并且等待一秒钟，但我希望这种等待一直持续到新页面出现。
So my question is:
Is this wrong? To achieve what I want?
Or do I have to use javascript?
所以我的问题是：这是错误的吗？为了实现我想要的？
或者我必须使用javascript？
回答by Basic
The way to do this is something like this:
这样做的方法是这样的：
On the first page (to show as soon as the link is clicked):
在第一页上（点击链接后立即显示）：
<a href="http://www.example.com/Page2.html" onclick="document.body.style.cursor='wait'; return true;">
On the second page (to show until the new page finishes loading):
在第二页上（显示直到新页面完成加载）：
<script type="text/javascript">
// Set the cursor ASAP to "Wait"
document.body.style.cursor='wait';
// When the window has finished loading, set it back to default...
window.onload=function(){document.body.style.cursor='default';}
</script>
回答by slebetman
The meaning of the cursorproperty in relation to CSS selector is that when the mouse is over an element matching the selector then use the cursor. So to change the cursor for the overall document you need to do something like:
cursor与 CSS 选择器相关的属性的含义是，当鼠标悬停在与选择器匹配的元素上时，使用光标。因此，要更改整个文档的光标，您需要执行以下操作：
html {
cursor: wait;
}
Obviously, this will change the cursor forever (or until the user closes the page, whichever comes first). To do this dynamically you need to use javascript:
显然，这将永远改变光标（或直到用户关闭页面，以先到者为准）。要动态执行此操作，您需要使用 javascript：
document.body.style.cursor = 'wait';
Note that cursor:handis only supported by IE and only needed for IE 5. The correct cursor name is pointer. Of course, if you need to support IE 5 you need to use cursor:hand. Instead of using browser sniffing you can use class name to change cursor:
请注意，cursor:hand仅 IE 支持，仅 IE 5 需要。正确的游标名称是pointer. 当然，如果您需要支持 IE 5，则需要使用cursor:hand. 您可以使用类名来更改光标，而不是使用浏览器嗅探：
CSS:
CSS：
.handCursor {
cursor: pointer;
cursor: hand;
}
JS:
JS：
document.body.className = 'handCursor';
回答by Alex
As 'answered' says you can use CSS to attach the cursor to the html element, which should cover the whole page.
正如“已回答”所说，您可以使用 CSS 将光标附加到 html 元素，该元素应该覆盖整个页面。
But you'll need to add a listener to every single anchor in the page with an onclick, which calls a function that sets the cursor on the HTML or body element. When the page reloads the cursor will go back to default again as the javascript would've refreshed
但是您需要使用 onclick 向页面中的每个锚点添加一个侦听器，它调用一个将光标设置在 HTML 或 body 元素上的函数。当页面重新加载时，由于 javascript 会刷新，光标将再次返回默认值
var anchors = document.getElementsByTagName("a");
for (var i=0,len=anchors.length; i<len; i++) {
anchors[i].onclick = function() {
document.body.style.cursor = "wait";
};
}
