Question

我的overlayWaitDiv定义如下CSS：

#overlayWaitDiv {
    cursor:   wait;
    position: fixed;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    z-index:  99;
}

我们的想法是将此叠加层置于其他元素之上，占用所有窗口空间，并显示wait光标。

我使用以下HTML显示/隐藏此内容：

显示叠加层：

<div id="overlayWaitDiv" style></div>

隐藏叠加层：

<div id="overlayWaitDiv" style="display: none; "></div>

这很好用：根据我页面中发生的事件，光标从正常变为wait，然后返回。我唯一的问题是，为了让这个光标切换发生，用户需要来移动指针。

如何让浏览器立即更改指针，而无需用户移动它？

Answer 1

放cursor:auto;然后就可以了

Answer 2

尝试使用java脚本设置光标值，如下所示。

$("#overlayWaitDiv").css("cursor","wait") ;

Answer 3

为什么不尝试在body标签中添加一个类？像这样：

.waiting {
   cursor: wait;
}

当你需要显示等待光标时，使用$（“body”）。addClass（“waiting”）和$（“body”）。removeClass（“waiting”）隐藏。

HTML：在移动指针之前，更改默认光标不起作用

3 个答案: