The mouse cursor set using jQuery / CSS does not change until the mouse moves

Question

In my code, I use jQuery / CSS to set and disable the wait mouse cursor with the following code:

function setWaitCursor() { $('body').css('cursor', 'wait'); } function setDefaultCursor() { $('body').css('cursor', ''); } 

I use this code to change the mouse pointer for a long operation:

 setWaitCursor(); ... do stuff that takes a few seconds ... setDefaultCursor(); 

This code does not seem to work if you do not move the mouse (at least for Chrome on Win 10). If the mouse does not move after calling setDefaultCursor , the cursor displays the wait cursor until the mouse is moved (or vice versa).

Example: https://jsfiddle.net/antonyakushin/0jv6rqkf/

In this script, the cursor changes within 2 seconds after the link is clicked. If you do not move the mouse when you click on the link, the cursor does not change.

What is the best way to solve this problem, so that even if the mouse is not moved, the cursor changes?

Answer 1

Some items have default cursor styles. So, laughing, changing the style of the cursor, we must also change it.

 $(document).ready(function() { function setWaitCursor(elem) { elem.css('cursor', 'wait'); $('body').css('cursor', 'wait'); } function setDefaultCursor(elem) { elem.css('cursor', ''); $('body').css('cursor', ''); } $('#testLink').on('click', function() { var x = $(this) setWaitCursor(x); setTimeout(function() { setDefaultCursor(x); }, 5000); return false; }); }); 

Demo script

Answer 2

Although this is not the answer to this particular problem, this behavior may occur:

• On chrome
• With open DevTools (which is very likely to fix this problem)

The solution is to simply close Chrome DevTools .

Answer 3

Just change body to * . It will be applicable to all elements.

Fiidle Demo

Code snippets:

 $(document).ready(function() { function setWaitCursor() { $('*').css('cursor', 'wait'); } function setDefaultCursor() { $('*').css('cursor', ''); } $('#testLink').on('click', function() { setWaitCursor(); setTimeout(function() { setDefaultCursor(); }, 2000); return false; }); }); 

 body { min-width: 500px; min-height: 500px; background-color: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="mouseContainer"> <a href="#" id="testLink">Test Link</a> </div> 

Answer 4

I had the same problem, and I noticed that in another post the cursor will not change until the mouse movements suggest blurring and focus to fix it. It worked for me. So your setWaitCursor () should look something like this. This should make it change without moving the mouse. This worked for me in Chrome, but I have not tried other browsers.

  function setWaitCursor(elem) { elem.css('cursor', 'wait'); $('body').css('cursor', 'wait'); window.blur(); window.focus(); }