129

मैं एक वेबपेज दिखाते हुए कर्सर को छुपाना चाहता हूं जो किसी बिल्डिंग हॉल में जानकारी प्रदर्शित करने के लिए है। यह बिल्कुल भी इंटरैक्टिव नहीं है। मैंने कर्सर प्रॉपर्टी और पारदर्शी कर्सर इमेज के साथ कोशिश की, लेकिन मैंने इसे काम नहीं किया।

किसी को पता है कि क्या यह किया जा सकता है? मुझे लगता है कि यह एक उपयोगकर्ता के लिए एक सुरक्षा खतरे के रूप में सोचा जा सकता है जो यह नहीं जान सकता कि वह कहाँ पर क्लिक कर रहा है, इसलिए मैं बहुत आशावादी नहीं हूँ ... धन्यवाद!

javascript html css

— yeyeyerman
स्रोत

202

सीएसएस के साथ:

selector { cursor: none; }

एक उदाहरण:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>

स्निपेट का विस्तार करें

इसे जावास्क्रिप्ट में एक तत्व पर सेट करने के लिए, आप styleसंपत्ति का उपयोग कर सकते हैं:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

यदि आप इसे पूरे शरीर पर सेट करना चाहते हैं:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

सुनिश्चित करें कि आप वास्तव में कर्सर को छिपाना चाहते हैं, हालांकि। यह वास्तव में लोगों को परेशान कर सकता है ।

— लुकास जोन्स
स्रोत

यह सही काम किया! जिज्ञासु बात यह है कि मैंने W3C विनिर्देशन ( w3.org/TR/CSS2/ui.html ) को टाल दिया और उन्होंने इस बारे में कुछ नहीं कहा। धन्यवाद!

— येयेरमैन

10

बल्कि डब्ल्यू 3! वर्ल्ड वर्ल्ड वाइड वेब।

— लुकास जोन्स

4

CSS3 का समर्थन नहीं करने वाले ब्राउज़रों की देखभाल कैसे करें: एक 1x1px पारदर्शी png या 1% पारदर्शिता png का उपयोग करें।

— डेरेक 會會

1

मेरे ज्ञान के लिए IE6 पारदर्शी पीएनजी का समर्थन करता है, जब तक कि यह वास्तविक पारदर्शिता है और अल्फा चैनल पारदर्शिता नहीं है। यदि संदेह है, तो परीक्षण सूट के साथ खुद को जांचें: libpng.org/pub/png/pngsuite.html ।

— शि

3

@ मैथियासहेरमैन: कोशिश करो document.body.style.cursor = 'auto'।

— लुकास जोन्स

30

पॉइंटर लॉक एपीआई

हालांकि cursor: noneसीएसएस समाधान निश्चित रूप से एक ठोस और आसान समाधान है , यदि आपका वास्तविक लक्ष्य डिफ़ॉल्ट कर्सर को हटाना है , जबकि आपके वेब एप्लिकेशन का उपयोग किया जा रहा है, या कच्चे माउस आंदोलन की अपनी व्याख्या लागू करें (उदाहरण के लिए, एफपीएस गेम), तो आप कर सकते हैं इसके बजाय पॉइंटर लॉक एपीआई का उपयोग करने पर विचार करना चाहते हैं ।

आप कर्सर को हटाने के लिए एक तत्व पर requestPointerLock का उपयोग कर सकते हैं , और सभी mousemoveघटनाओं को उस तत्व पर पुनर्निर्देशित कर सकते हैं (जिसे आप संभाल सकते हैं या नहीं संभाल सकते हैं):

document.body.requestPointerLock();

अवरोध खोल करने के लिए, आप उपयोग कर सकते exitPointerLock :

document.exitPointerLock();

अतिरिक्त नोट्स

कोई कर्सर नहीं, असली के लिए

यह एक बहुत शक्तिशाली एपीआई कॉल है। यह न केवल आपके कर्सर को अदृश्य रूप से प्रस्तुत करता है, बल्कि यह वास्तव में आपके ऑपरेटिंग सिस्टम के मूल कर्सर को हटा देता है । आप पाठ का चयन करें, या ऐसा करने में सक्षम नहीं होगा कुछ भी जब तक पॉइंटर लॉक (का उपयोग करके या तो जारी किया गया है (अपने कोड में कुछ माउस की घटनाओं को सुनने को छोड़कर) अपने माउस के साथ exitPointerLockया दबाने ESCकुछ ब्राउज़रों में)।

अर्थात्, आप फिर से दिखाने के लिए अपने कर्सर के साथ खिड़की नहीं छोड़ सकते, क्योंकि कोई कर्सर नहीं है।

प्रतिबंध

जैसा कि ऊपर उल्लेख किया गया है, यह एक बहुत शक्तिशाली एपीआई कॉल है, और इस प्रकार केवल वेब पर कुछ प्रत्यक्ष उपयोगकर्ता-इंटरैक्शन के जवाब में बनाया जा सकता है, जैसे कि एक क्लिक; उदाहरण के लिए:

document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

इसके अलावा, requestPointerLockएक सैंडबॉक्स से काम नहीं करेगा iframeजब तक कि allow-pointer-lockअनुमति सेट है।

उपयोगकर्ता-सूचनाएं

कुछ ब्राउज़र लॉक लगे होने से पहले पुष्टि के लिए उपयोगकर्ता को संकेत देंगे, कुछ बस एक संदेश प्रदर्शित करेंगे। इसका मतलब है कि सूचक लॉक कॉल के तुरंत बाद सक्रिय नहीं हो सकता है। हालांकि, पॉइंटर लॉकिंग की वास्तविक सक्रियता pointerchangeको उस तत्व पर घटना को सुनकर सुना जा सकता है जिस requestPointerLockपर कहा गया था:

document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

अधिकांश ब्राउज़र केवल एक बार संदेश प्रदर्शित करेंगे, लेकिन फ़ायरफ़ॉक्स कभी-कभी हर एक कॉल पर संदेश को स्पैम कर देगा। AFAIK, यह केवल उपयोगकर्ता-सेटिंग्स द्वारा काम किया जा सकता है, फ़ायरफ़ॉक्स में डिसएबल पॉइंटर-लॉक अधिसूचना देखें ।

कच्चे माउस आंदोलन को सुनकर

पॉइंटर लॉक एपीआई न केवल माउस को हटाता है, बल्कि कच्चे माउस आंदोलन डेटा को तत्व requestPointerLockपर पुनर्निर्देशित करता है। इसे केवल mousemoveघटना का उपयोग करके सुना जा सकता है , फिर घटना वस्तु पर गुणों movementXऔर movementYगुणों तक पहुंच बनाई जा सकती है :

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});

— जॉन वीज़
स्रोत

1

इसके लिए धन्यवाद। मैंने पाया कि स्पा को बंद करने का यह एकमात्र विश्वसनीय साधन है जब एक फुलस्क्रीन स्लाइड शो पर स्विच किया जाता है।

— वेलोजेट

1

मैंने इसे पारदर्शी * .cur 1px से 1px के साथ किया, लेकिन यह छोटे बिंदु जैसा दिखता है। :( मुझे लगता है कि यह सबसे अच्छी क्रॉस-ब्राउज़र चीज़ है जो मैं कर सकता हूं। CSS2.1 का 'कर्सर' प्रॉपर्टी के लिए कोई 'मूल्य' नहीं है - यह CSS3 में जोड़ा गया था। इसीलिए यह हर जगह काम करने योग्य नहीं है।

— zaycker
स्रोत

4

इसके बजाय 1% पारदर्शिता। Png / .cur का उपयोग करें।

— डेरेक 會會 k

1

यदि आप इसे CSS में करना चाहते हैं:

#ID { cursor: none !important; }

7

आपको आमतौर पर बचना चाहिए !important।

— लुका स्टील

0

पूरे HTML दस्तावेज़ के लिए इसे आज़माएँ

html * {cursor:none}

या अगर कुछ css आपके कर्सर को ओवरराइट करते हैं: कोई उपयोग नहीं करता है!

html * {cursor:none!important}

— पावेल सलाक्वार्डा
स्रोत

0

यदि आप पूरे वेबपेज में कर्सर को छिपाना चाहते हैं, तो bodyजब तक यह पूरे दृश्य पृष्ठ को कवर नहीं करता है, तब तक काम नहीं करेगा, जो हमेशा ऐसा नहीं होता है। यह सुनिश्चित करने के लिए कि पृष्ठ में हर जगह कर्सर छिपा हुआ है, उपयोग करें:

document.documentElement.style.cursor = 'none';

इसे फिर से उपयोग करने के लिए:

document.documentElement.style.cursor = 'auto';

स्थिर सीएसएस अंकन के साथ एनालॉग से जवाब में है पावेल Salaquarda (संक्षेप में: html * {cursor:none})

— गैस्पर
स्रोत

क्या सीएसएस या जावास्क्रिप्ट का उपयोग करके वेबपेज में कर्सर को छिपाना संभव है?

पॉइंटर लॉक एपीआई

अतिरिक्त नोट्स