कर्सर को फिंगर पॉइंटर में बदलें


234

मेरे पास यह है aऔर मुझे नहीं पता है कि मुझे "ऑनमूवर" में सम्मिलित करने की आवश्यकता है ताकि कर्सर एक नियमित लिंक की तरह फिंगर पॉइंटर में बदल जाए:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

मैंने कहीं पढ़ा है जिसे मुझे लगाने की आवश्यकता है:

onmouseover="cursor: hand (a pointing hand)"

लेकिन यह मेरे लिए काम नहीं कर रहा है।

इसके अलावा मुझे यकीन नहीं है कि यह जावास्क्रिप्ट, सीएसएस, या सिर्फ सादे HTML माना जाता है।


यह css है और ऑनमूवर इवेंट एक जावास्क्रिप्ट इवेंट है।
स्कॉट

आप सीधे onmouseover = "" में css नहीं डालते हैं। इसके अलावा, कर्सर: आपके लिंक पर मंडराते समय हाथ डिफ़ॉल्ट कार्रवाई होना चाहिए। यदि ऐसा नहीं हो रहा है, तो हाथ में एक और मुद्दा हो सकता है।
टैंक



3
योग्य "हाथ ..... एक इशारा करने वाला हाथ!" क्षमा करें, मैं विरोध नहीं कर सका।
क्रिस्टीन

जवाबों:


458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

यह सी.एस.ई.

या एक स्टाइल शीट में:

a.menu_links { cursor: pointer; }

2
यह परीक्षण करने के बाद, ऐसा लगता है कि ऑनमॉवरओवर = "" और स्टाइल = कर्सर: पॉइंटर दोनों का होना आवश्यक है। "यदि आपके पास स्टाइल टैग है, तो पॉइंटर पॉइंटर कर्सर एक क्लिक इंटरैक्शन के बाद मानक पॉइंटर के लिए / डिफ़ॉल्ट हो जाएगा। अच्छी पोस्ट स्कॉट, धन्यवाद।
Nubtacular

1
@DnfD आप केवल जरूरत है onmouseover, अगर वहाँ कोई href परिभाषा। हैं, तो एक मानक लंगर की तरह, वहाँ है एक hrefपरिभाषा, onmouseoverआवश्यक नहीं है।
स्कॉट

@DnfD स्वीकृत उत्तर वास्तव में बहुत ही भयावह है। यह काम करता है, लेकिन स्पष्ट नहीं है। निकालें mouseover=""और style="cursor: pointer;"छोड़ दें class="menu_links" यह काम करेगा! भले ही hrefवहां हो या न हो।
जरीट लॉयड

@Scott नहीं, तुम नहीं है की जरूरत हैmouseover वहाँ में घटना। DnfD पर मेरी पिछली टिप्पणी देखें
लॉयड

@JarettLloyd बहुत ब्राउज़र समर्थन और सीएसएस निर्माण पर निर्भर करता है। यह 2012 का जवाब है। 6+ वर्षों में चीजें बदल गई हैं।
स्कॉट

52

आप इसे CSS में कर सकते हैं:

a.menu_links {
    cursor: pointer;
}

यह वास्तव में लिंक के लिए डिफ़ॉल्ट व्यवहार है। आपने या तो इसे अपने सीएसएस में कहीं और ओवरराइड किया होगा, या इसमें कोई hrefविशेषता नहीं है (यह आपके उदाहरण से गायब है)।


मेरे पास एक href नहीं है coz मैं पेज को छोड़ना नहीं चाहता। इसका लिंक जेएस फ़ंक्शन को ट्रिगर करता है और अगर मैं href = "#" सम्मिलित करता हूं तो यह गड़बड़ हो जाता है और यह गलत पृष्ठ को पुनः लोड करता है
Dvir Levy

2
@DvirLevy - तो या तो झूठे लौटें और उपयोग करें href="#", या जैसा कि मैंने आपको दिखाया है, वैसे ही CSS का उपयोग करें ...
जोसेफ सिलबर

22

मुझे यह एक का उपयोग करना पसंद है अगर मेरे पास पृष्ठ पर केवल एक लिंक है:

onMouseOver="this.style.cursor='pointer'"


7

यदि आप इसके साथ अतिरिक्त मील जाना चाहते हैं तो यहां कुछ अच्छा है। url में, आप एक लिंक का उपयोग कर सकते हैं या एक छवि png को बचा सकते हैं और पथ का उपयोग कर सकते हैं। उदाहरण के लिए:

यूआरएल ( 'संपत्ति / imgs / theGoods.png');

नीचे कोड है:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

तो यह केवल 128 X 128 आकार के तहत काम करेगा, कोई भी बड़ा और छवि अभ्यस्त लोड नहीं होगा। लेकिन आप व्यावहारिक रूप से किसी भी छवि का उपयोग कर सकते हैं जो आप चाहते हैं! यह शुद्ध css3, और कुछ html पर विचार किया जाएगा। आप सब html में करना है

<div class='cursor'></div>

और केवल उस div में, वह कर्सर दिखाएगा। इसलिए मैं आमतौर पर इसे बॉडी टैग में शामिल करता हूं।


6

मुझे लगता है कि ऊपर "सबसे अच्छा जवाब", यद्यपि प्रोग्रामेटिक रूप से सटीक, वास्तव में सामने वाले प्रश्न का उत्तर नहीं देता है। सवाल यह है कि माउसओवर इवेंट में पॉइंटर को कैसे बदलना है। मैं इस बारे में पोस्ट देखता हूं कि किसी व्यक्ति की त्रुटि कैसे हो सकती है कहीं प्रश्न का उत्तर नहीं दे रहा है। स्वीकृत उत्तर में, माउसओवर ईवेंट रिक्त है ( onmouseover="") और शैली विकल्प, इसके बजाय, शामिल है। चकित होकर ऐसा क्यों किया गया।

पूछताछकर्ता के लिंक में कुछ भी गलत नहीं हो सकता है। निम्नलिखित HTML पर विचार करें:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

जब उपयोगकर्ता इस लिंक पर माउस ले जाता है, तो पॉइंटर हाथ में नहीं बदलेगा ... इसके बजाय, पॉइंटर ऐसा व्यवहार करेगा जैसे वह सामान्य पाठ पर मँडरा रहा हो। हो सकता है कि कोई ऐसा नहीं चाहता ... और इसलिए, माउस पॉइंटर को बदलने के लिए कहा जाना चाहिए।

इसका उत्तर मांगा जा रहा है (जिसे दूसरे द्वारा पोस्ट किया गया था):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

हालाँकि, यह ... एक बुरा सपना है अगर आपके पास इनमें से बहुत सारे हैं, या इस तरह की चीज़ का उपयोग सभी जगह पर किया जाता है और किसी प्रकार का बदलाव करने या बग में चलाने का निर्णय लिया जाता है। इसके लिए CSS क्लास बनाना बेहतर है:

a.lendhand {
  cursor: pointer;
}

फिर:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

कई अन्य तरीके हैं जो यकीनन इस विधि से बेहतर होंगे। DIV s, BUTTON s, IMG s, आदि अधिक उपयोगी साबित हो सकते हैं। मैं उपयोग करने में कोई बुराई नहीं देखता <a>...</a>, हालाँकि।

jarett।


4

इसे नेविगेशन के कारण से रोकने के लिए hrefएक मान्य लिंक और return false;ईवेंट हैंडलर में बनाने के लिए एक विशेषता जोड़ें ;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(या displayData()झूठी वापसी करें और ..="return displayData(..)


3

शुद्ध सीएसएस के माध्यम से समाधान जैसा कि उत्तर में वर्णित है, इस स्थिति के लिए सबसे उपयुक्त नहीं है।

इस विषय में उदाहरण में सामान्य स्थिर href विशेषता नहीं है, यह केवल JS को कॉल कर रहा है, इसलिए यह JS के बिना कुछ भी नहीं करेगा।

इसलिए केवल जेएस के साथ पॉइंटर पर स्विच करना अच्छा है। तो, समाधान

onMouseOver="this.style.cursor='pointer'"

जैसा कि ऊपर उल्लेख किया गया है (लेकिन मैं वहां टिप्पणी नहीं कर सकता) इस मामले में सबसे अच्छा है। (लेकिन हां, सामान्य, जेएस की मांग नहीं करने वाले सामान्य लिंक के लिए, जेएस के बिना शुद्ध सीएसएस के साथ काम करना बेहतर है।)


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.