JQuery का उपयोग करके सूचक से उंगली तक कर्सर कैसे बदलें?

Question

यह शायद वास्तव में आसान है, लेकिन मैंने इसे पहले कभी नहीं किया है। आप रेगुलर पॉइंटर के बजाय अपने कर्सर को उंगली में कैसे बदलें (जैसे लिंक पर क्लिक करने के लिए)?

और jQuery के साथ यह कैसे करना है क्योंकि मैं इसके लिए उपयोग कर रहा हूं।

Answer 1

$('selector').css('cursor', 'pointer'); // 'default' to revert

मुझे पता है कि आपके मूल प्रश्न के अनुसार भ्रमित हो सकते हैं, लेकिन "उंगली" कर्सर को वास्तव में "पॉइंटर" कहा जाता है।

सामान्य तीर कर्सर सिर्फ "डिफ़ॉल्ट" है।

सभी संभावित डिफ़ॉल्ट पॉइंटर DEMO लगते हैं

Comments

यदि संभव हो तो, CSS के माध्यम से ऐसा करें (a: hover selector के साथ कहें) और jquery से पूरी तरह बचें।

— 23

@ कौन - ज़रूर, लेकिन अगर कर्सर बदलना एक कार्यक्षमता का हिस्सा है जो JS पर निर्भर करता है (मान लीजिए कि आपके पास स्लाइडर है), तो आप नहीं चाहेंगे कि उपयोगकर्ता JS बंद कर दिया गया हो।

— पीटर अज़ताई

मैंने $('selector').css('cursor', 'auto');पॉइंटर एरिया से माउस को हटाते समय स्टाइल को स्ट्रिप करने के लिए इसका इस्तेमाल किया । सीएसएस वर्गों क्लीनर हो सकता है ... साथ $('...').addClass('someclass')और$('...').removeClass('someclass')

— jocull

जब यह बॉडी टैग पर लागू होता है और इस तरह एक कस्टम कर्सर में बदलता है: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );यह काम नहीं करता है। मुझे नहीं पता कि यह एक बग़ीचे में जर्क या क्रोम है। havent हालांकि अन्य ब्राउज़रों पर यह परीक्षण किया।

— jcfrei

Answer 2

अपडेट करें! नया और बेहतर! प्लगइन खोजें @ GitHub !

---

एक अन्य नोट पर, जबकि वह विधि सरल है, मैंने एक jQuery प्लग बनाया है ( इस jsFiddle पर पाया गया, बस टिप्पणी लाइनों के बीच कोड और कॉपी करें ) जो किसी भी तत्व पर कर्सर को उतना ही सरल बनाता है $("element").cursor("pointer")।

लेकिन वह सब नहीं है! अब कार्य करें और आपको बिना किसी अतिरिक्त शुल्क के हाथ कार्य करने positionऔर मिलेंगे ishover! यह सही है, 2 बहुत आसान कर्सर कार्य करता है ... मुफ़्त!

वे डेमो में देखे गए सरल काम करते हैं:

$("h3").cursor("isHover"); // if hovering over an h3 element, will return true, 
    // else false
// also handy as
$("h2, h3").cursor("isHover"); // unless your h3 is inside an h2, this will be 
    // false as it checks to see if cursor is hovered over both elements, not just the last!
//  And to make this deal even sweeter - use the following to get a jQuery object
//       of ALL elements the cursor is currently hovered over on demand!
$.cursor("isHover");

इसके अलावा:

$.cursor("position"); // will return the current cursor position as { x: i, y: i }
    // at anytime you call it!

आपूर्ति सीमित है, इसलिए अधिनियम अब!

Answer 3

आप रेगुलर पॉइंटर के बजाय अपने कर्सर को उंगली में कैसे बदलें (जैसे लिंक पर क्लिक करने के लिए)?

यह सीएसएस संपत्ति का उपयोग कर प्राप्त करने के लिए बहुत सरल है cursor, कोई jQueryज़रूरत नहीं है।

आप इसके बारे में CSS cursor propertyऔर अधिक पढ़ सकते हैं: औरcursor - CSS | MDN

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}

<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>

Answer 4

यह बहुत सीधा है

एचटीएमएल

<input type="text" placeholder="some text" />
<input type="button" value="button" class="button"/>
<button class="button">Another button</button>

jQuery

$(document).ready(function(){
  $('.button').css( 'cursor', 'pointer' );

  // for old IE browsers
  $('.button').css( 'cursor', 'hand' ); 
});

इसे JSfiddle पर देखें