在整个HTML页面上等待光标

小编典典

在整个HTML页面上等待光标

css

是否可以通过简单的方式将光标设置为在整个html页面上“等待”？这个想法是向用户显示ajax调用完成时发生了什么事情。下面的代码显示了我尝试过的简化版本，还演示了遇到的问题：

如果元素（＃id1）设置了光标样式，则它将忽略主体上的一个设置（显然）
一些元素具有默认的光标样式（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>

该解决方案仅显示等待光标，但允许单击。

阅读 467

2020-05-16

共1个答案

小编典典

我了解您可能对此没有控制权，但是您可能会选择一个“遮罩”的div，该div的z索引大于1来覆盖整个主体。如果您愿意，div的中心部分可以包含一条加载消息。

然后，您可以将光标设置为在div上等待，而不必担心链接位于蒙版div之下。这是“ masking div”的一些CSS示例：

身体{身高：100％；}
div＃mask {光标：等待；z索引：999；高度：100％; 宽度：100％; }

2020-05-16