मेरे पास एक ड्रैग यूआई प्रोग्राम है, जहां ड्रैग करने योग्य तत्व पर माउस कर्सर क्लिक पर एक हथियाने वाले हाथ में बदल जाता है।पूरे पृष्ठ के लिए माउस कर्सर बदलें?
समस्या है, मैं खींचें स्क्रीन पर कहीं भी होने की अनुमति देते हैं, और लंगर टैग, आदि पर कर्सर परिवर्तन ...
मैं $('*').addClass('grabbing') की कोशिश की है, लेकिन यह वास्तव में महंगा है।
क्या इसे संभालने के लिए एक आसान आसान कोड प्रभावी तरीका है?
सीएसएस स्तर पर इसे अभी करें:
* {
cursor: pointer;
}
डोम में हर नोड पुनरावृति और उसके सीएसएस वर्गों के पुनर्लेखन के लिए jQuery यह बलों में यह कर। एक लंबे दस्तावेज़ पर, यह समय की एक बड़ी बर्बादी है।
लेकिन यह हमेशा सक्रिय रहेगा। माउस को नीचे होने पर कर्सर को केवल तभी बदलना होगा। इसे किसी भी तरह जावास्क्रिप्ट में होने की जरूरत है। – Wesley
आप जावास्क्रिप्ट के माध्यम से सीएसएस नियमों को गतिशील रूप से जोड़/हटा सकते हैं। बस इसे onmousedown/onmouseup के भीतर से करें और पृष्ठ पर प्रत्येक डोम नोड से कक्षाओं को जोड़ने/हटाने से तेज़ होना चाहिए। –
@ मार्क बी कूल। क्या आप एक उदाहरण के साथ एक नया जवाब प्रदान कर सकते हैं? मैं इसे एक शॉट दूंगा और यदि यह सही काम करता है तो मैं इसे चिह्नित करूंगा। – Wesley
इस
$('body').addClass('grabbing');
या
$(document).addClass('grabbing');
// संपादित उत्तर
$('body').mousedown(function(e){
$(this).css({'cursor':'pointer'});
}).mouseup(function(e){
$(this).css({'cursor':'auto'});
});
कोशिश आप फ़ायरबग पर है, तो आप शरीर शैली टैग में परिवर्तन देख सकते हैं। लेकिन कुछ कैसे काम नहीं कर रहे हैं। आप इसे एक संदर्भ के रूप में ले सकते हैं और समाधान प्राप्त करने के समान दृष्टिकोण का प्रयास कर सकते हैं।
किराया नहीं होगा zindex तत्वों को ओवरराइड? –
@ माइक क्रिस्टेनसेन सही। यह काफी नहीं करेगा। – Wesley
एकमात्र तरीका मैं ऐसा करने के बारे में सोच सकता हूं वह हैकी है।
एक डीआईवी बनाएं जिसमें उस पृष्ठ पर अन्य सभी चीज़ों की तुलना में कुछ अधिक की जेड-इंडेक्स है, और आपके पास कर्सर है। जब भी माउस कर्सर नीचे चला जाता है तो उस div को सक्षम करें। नमूना कोड:
<html><body style="width: 100%; height: 100%;">
<DIV id="cover" style="position: absolute; width: 100%; height: 100%; zindex: 5000; top: 0px; left: 0px; cursor: pointer; background: transparent; display: none;"> </div>
<ul><li>One</li><li>Two</li><li>Three</li></ul>
<script>
window.document.body.onmousedown = function()
{
document.getElementById('cover').style.display = '';
};
window.document.body.onmouseup = function()
{
document.getElementById('cover').style.display = 'none';
};
</script>
</body></html>
भी देखें: http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page –