माउस कर्सर jQuery/सीएसएस का उपयोग कर सेट नहीं बदल रहा है जब तक माउस

Question

चले गए मेरी कोड में मैं jQuery/सीएसएस का उपयोग निर्धारित करने के लिए और सेट किए बिना निम्न कोड के साथ माउस कर्सर 'प्रतीक्षा':

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

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

मैं इस कोड का उपयोग एक लंबे ऑपरेशन के लिए माउस कर्सर को बदलने के लिए:

setWaitCursor(); 

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

setDefaultCursor(); 

इस कोड (विन 10 पर कम से कम क्रोम के लिए) काम करने के लिए जब तक आप माउस ले जाते हैं, फिर भी नहीं लगता है। यदि माउस setDefaultCursor के बाद स्थानांतरित नहीं किया जाता है, तो कर्सर 'प्रतीक्षा' कर्सर प्रदर्शित करता है जब तक कि माउस स्थानांतरित नहीं हो जाता (या इसके विपरीत)।

उदाहरण: https://jsfiddle.net/antonyakushin/0jv6rqkf/

इस बेला में, लिंक के बाद 2 सेकंड के लिए कर्सर परिवर्तन क्लिक किया। यदि आप लिंक पर क्लिक करते समय माउस को नहीं ले जाते हैं, तो कर्सर नहीं बदलता है।

इस समस्या को हल करने का सबसे अच्छा तरीका क्या है, ताकि माउस को स्थानांतरित नहीं किया जा सके, कर्सर बदल गया है?

Answer 1

कुछ तत्वों में डिफ़ॉल्ट कर्सर शैलियों हैं। तो कर्सर शैली को बदलना, हमें इसे बदलने की जरूरत है।

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

बस body* लिए बदल जाते हैं। यह सभी तत्वों पर लागू होगा।

Fiidle Demo

कोड के टुकड़े:

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