2011-07-31 22 views
14

के भीतर माउस कर्सर छुपाएं मैं फ्लैश के विकल्प के रूप में जावास्क्रिप्ट और एचटीएमएल 5 कैनवास तत्व का उपयोग करके गेम बनाने की प्रक्रिया में हूं। मेरा सवाल है: क्या कोई ऐसा कोड है जिसका उपयोग मैं माउस कर्सर/पॉइंटर को छिपाने के लिए कर सकता हूं क्योंकि यह कैनवास के भीतर गुजरता है? सहायता बहुत सराहना की है!एचटीएमएल 5 कैनवास जावास्क्रिप्ट

+0

संबंधित (शर्मनाक प्लग): http://stackoverflow.com/questions/1071363/is-it-possible-to-hide-the- कर्सर-इन-ए-वेबपृष्ठ-उपयोग-सीएसएस-या-जावास्क्रिप्ट –

+0

@ लुकास जोन्स मैं उसी लिंक को पोस्ट करने वाला था, जाहिर है कि आप इसे थोड़ा तेज़ पा सकते हैं। – qw3n

+0

@ qw3n: जैसा कि मैंने अभी अपने उत्तर पर एक टिप्पणी का जवाब दिया था, इसलिए 'मेरे स्टैक एक्सचेंज ™ सुपरकॉलिडर मल्टीड्रॉपडाउन ™ के इनबॉक्स में जुड़वां। –

उत्तर

14

मुझे नहीं लगता कि आपको इसके लिए जावास्क्रिप्ट चाहिए, आप केवल सीएसएस का उपयोग कर सकते हैं। फिर अपने कैनवास एक div id/वर्ग निरुपित , और अपने सीएसएस टेम्पलेट में इस का उपयोग करें:

* {cursor: none;}

+0

आह! आपका बहुत बहुत धन्यवाद! मैं कोशिश करूँगा! – Chris

+1

यह [CSS3] (http://dev.w3.org/csswg/css3-ui/#cursor) का हिस्सा है लेकिन [CSS2] का हिस्सा नहीं है (http://www.w3.org/TR/CSS21/ ui.html # propdef-कर्सर)। – Shi

+0

यह लिनक्स पर नवीनतम फ़ायरफ़ॉक्स पर काम नहीं करता है। कर्सर शेष पृष्ठ के लिए छिपा हुआ है, लेकिन अभी भी कैनवास पर दिखाई देता है। –

7

आप कर्सर शैली में हेरफेर करने के जावास्क्रिप्ट का उपयोग कर सकते हैं। कोड:

<div id="canvas_div_no_cursor"> 
    <!-- canvas here --> 
</div> 
<script type="text/javascript"> 
    document.getElementById('canvas_div_no_cursor').style.cursor = "none"; 
</script> 
+0

मैंने कोशिश की, लेकिन यह केवल फ़ायरफ़ॉक्स में काम करता प्रतीत होता है। इसके अलावा, मैं कुछ कारणों से सीएसएस को काम नहीं कर सका, मुझे विश्वास है कि यह भी फ़ायरफ़ॉक्स में ही काम करता है। क्या कोई जानता है कि क्रॉस-ब्राउज़र समाधान है या नहीं? मैं आपकी सभी मदद की सराहना करता हूं। – Chris

+0

@ क्रिस: यह परीक्षण के रूप में आईई 9 और फ़ायरफ़ॉक्स 4.0 में काम करता है। ओपेरा 11 और Google क्रोम कर्सर छुपा नहीं है। (शायद कुछ सुरक्षा सेटिंग्स इसे प्रतिबंधित करें)। – VIK

+0

@ क्रिस Google क्रोम मेरे लिए कर्सर छुपा रहा है जब jQuery का उपयोग '$ ('# canvas_div_no_cursor') किया जाता है। Css ('कर्सर', 'none') –

0

सबसे आसान तरीका है (आधुनिक ब्राउज़रों पर) कैनवास पर none के लिए कर्सर सेट करने के लिए है।

अपने कैनवास HTML में बनाया गया है तो कार्य करें:

<canvas id="canvas" style="cursor: none;"></canvas> 

मैं एक शैली पत्र पर इस एहसान होगा क्योंकि आप की गारंटी के लिए कर्सर मूल्य से अधिक से भरा नहीं है चाहता हूँ।

अपने कैनवास जावास्क्रिप्ट में बनाया गया है तो कार्य करें:

const canvas = document.createElement('canvas'); 
canvas.style.cursor = 'none'; 
document.body.appendChild(canvas); 
संबंधित मुद्दे