HTML: Changing default cursor does not work until pointer is moved

I have an overlayWaitDiv defined as follows with CSS:

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

The idea is that this overlay is put on top of the other elements, taking all window space, and shows a wait cursor.

I am showing/hiding this by using the following HTML:

To display the overlay:

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

To hide the overlay:

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

This is working fine: the cursor is changing from normal to wait, and back, according to the events happening in my page. The only problem that I have is that, in order for this cursor switch to happen, the user needs to move the pointer.

How can I make the browser immediately change the pointer, without the need for the user to move it?

Answers

put cursor:auto; then it will ok

Try setting the cursor value using java script as shown below.

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

Why don't you try add a class to the body tag? Like this:

.waiting {
   cursor: wait;
}

When you need to show the waiting cursor use $("body").addClass("waiting") and $("body").removeClass("waiting") to hide.

Need Your Help