极客观点
项目管理
HarmonyOS
是否可以通过简单的方式将光标设置为在整个 html 页面上“等待”？这个想法是在 ajax 调用完成时向用户展示正在发生的事情。下面的代码显示了我尝试过的简化版本，也展示了我遇到的问题：
- 如果一个元素 (#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）
稍后再编辑…
Dorward 的一个更简单的解决方案：
.wait, .wait * { cursor: wait !important; }
接着
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>
此解决方案仅显示等待光标但允许点击。
原文由 Aleris 发布，翻译遵循 CC BY-SA 4.0 许可协议
我知道您可能无法控制这一点，但您可能会选择一个覆盖整个身体且 z-index 高于 1 的“掩蔽”div。如果您愿意，div 的中心部分可以包含加载消息。
然后，您可以将光标设置为在 div 上等待，而不必担心链接，因为它们位于您的屏蔽 div“之下”。下面是“masking div”的一些示例 CSS：