有没有可能以一种简单的方式在整个html页面上将光标设置为“等待”?其思想是在ajax调用正在完成时向用户显示正在发生的事情。下面的代码显示了我尝试的简化版本,并演示了我遇到的问题:
测试:
<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>
此解决方案仅显示等待光标,但允许单击。
https://stackoverflow.com/questions/192900
复制相似问题