Mouse Set cursore utilizzando jQuery/CSS non cambia fino a quando il mouse si trasferisce

Question

Nel mio codice uso il jQuery/CSS per inserire e disinserire il 'aspettare' cursore del mouse con il seguente codice:

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

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

io uso questo codice per cambiare il cursore del mouse per un'operazione lunga:

setWaitCursor(); 

... do stuff that takes a few seconds ... 

setDefaultCursor(); 

Questo codice non sembra funzionare a meno che non si sposta il mouse, però (almeno per Chrome su Windows 10). Se il mouse non viene spostato dopo la chiamata a setDefaultCursor, il cursore visualizza il cursore di 'attesa' fino a quando il mouse viene spostato (o viceversa).

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

In questo violino, il cursore cambia per 2 secondi dopo il collegamento è cliccato. Se non si sposta il mouse quando si fa clic sul collegamento, il cursore non cambia.

Qual è il modo migliore per risolvere questo problema, in modo che anche se il mouse non viene spostato, il cursore viene modificato?

Answer 1

Alcuni elementi hanno stili di cursore predefiniti. Quindi, cambiando lo stile del cursore, dobbiamo cambiare anche questo.

$(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 fiddle

Answer 2

Basta cambiare il body-*. Sarà applicabile a tutti gli elementi.

Fiidle Demo

frammenti di codice:

$(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>