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

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

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

.waiting {
   cursor: wait;
}

当您需要显示等待光标时，使用 $("body").addClass("waiting") 和 $("body").removeClass("waiting") 隐藏。

Answer 3

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

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