将光标放在整个HTML页面上 [英] Wait cursor over entire html page
问题描述
是否可以通过简单的方式将光标设置为等待整个html页面？这个想法是向用户显示在ajax调用完成时发生了什么。下面的代码显示了我尝试的简化版本，并且演示了我遇到的问题：
Is it possible to set the cursor to 'wait' on the entire html page in a simple way? The idea is to show the user that something is going on while an ajax call is being completed. The code below shows a simplified version of what I tried and also demonstrate the problems I run into:
- 如果一个元素（显然）
- 某些元素具有默认光标样式（a），并且不会在悬停时显示等待光标
- body元素具有一定的高度，取决于内容，如果页面很短，则光标不会显示在页脚下面
测试：
<html>
<head>
<style type="text/css">
#id1 {
background-color: #06f;
cursor: pointer;
}
#id2 {
background-color: #f60;
}
</style>
</head>
<body>
<div id="id1">cursor: pointer</div>
<div id="id2">no cursor</div>
<a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
</body>
</html>
稍后编辑...
在Firefox和IE中使用： / p>
Later edit...
It worked in firefox and IE with:
div#mask { display: none; cursor: wait; z-index: 9999;
position: absolute; top: 0; left: 0; height: 100%;
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}
<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>
此解决方案的问题（或功能）是，它会防止由于重叠的div （感谢Kibbee）
The problem with (or feature of) this solution is that it will prevent clicks because of the overlapping div (thanks Kibbee)
稍后编辑...
Dorward提供的更简单的解决方案：
Later later edit...
A simpler solution from Dorward:
.wait, .wait * { cursor: wait !important; }
，然后
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>
此解决方案只显示等待游标，但允许点击。
This solution only shows the wait cursor but allows clicks.
推荐答案
我知道你可能无法控制这一点，但你可能会改为覆盖整个身体的一个掩蔽div，z-index高于1。如果你喜欢，div的中心部分可以包含一个加载消息。
I understand you may not have control over this, but you might instead go for a "masking" div that covers the entire body with a z-index higher than 1. The center part of the div could contain a loading message if you like.
然后，你可以设置游标等待div，不必担心链接，因为它们在掩蔽下面。下面是一些用于masking div的示例CSS：
Then, you can set the cursor to wait on the div and don't have to worry about links as they are "under" your masking div. Here's some example CSS for the "masking div":
body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }
这篇关于将光标放在整个HTML页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
