有没有可能以一种简单的方式在整个html页面上将光标设置为"等待"？其 idea 是在Ajax调用正在完成时向用户显示正在发生的事情.下面的代码显示了我try 的简化版本，还演示了我遇到的问题:
- 如果元素(#id1)设置了游标样式，它将忽略Body上设置的游标样式(显然)
- 某些元素具有默认光标样式(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中使用:
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)
稍后编辑.
多沃德提供了一个更简单的解决方案:
.wait, .wait * { cursor: wait !important; }
然后
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>
此解决方案仅显示等待光标，但允许单击.