माउस पर माउस कर्सर को एंकर जैसी शैली में बदलें


109

अगर मैं माउस को हॉवर करता हूँ divतो माउस कर्सर को HTML एंकर में कर्सर की तरह बदल दिया जाएगा।

मैं यह कैसे कर सकता हूँ? क्या मुझे जावास्क्रिप्ट की आवश्यकता है या यह सीएसएस के साथ ही संभव है?

जवाबों:


221

मान लें कि आपके divपास एक है id="myDiv", तो अपने सीएसएस में निम्नलिखित जोड़ें। cursor: pointerनिर्दिष्ट करता है कि कर्सर कि एंकर (हाइपरलिंक) के लिए इस्तेमाल होता है उसी हाथ आइकन होना चाहिए:

जोड़ने के लिए सीएसएस

#myDiv
{
    cursor: pointer;
}

आप बस कर्सर शैली को अपने divHTML में इस तरह जोड़ सकते हैं :

<div style="cursor: pointer">

</div>

संपादित करें:

यदि आप इसके लिए jQuery का उपयोग करने के लिए दृढ़ हैं, तो अपने $(document).ready()या शरीर के लिए निम्न पंक्ति जोड़ें onload: ( myClassजो भी आपके सभी वर्ग के वर्ग के साथ बदलें div)

$('.myClass').css('cursor', 'pointer');

मैं jquery css नहीं के साथ ऐसा करना चाहता हूं
जोकि संभवत:

7
@ गुरु: स्क्रिप्टिंग की कोई जरूरत नहीं है। आपको बस style="cursor: pointer"अपने divHTML में जोड़ना है । मैं एक उदाहरण के साथ अपना उत्तर संपादित करूंगा।
डेविन बर्क

एक ही कक्षा के साथ पाँच विभाजन होते हैं, मैं यह सब "शैली =" कर्सर: पॉइंटर "में नहीं जोड़ सकता
स्पष्ट रूप से

@guru, यदि सभी में div का वर्ग समान है, तो आप वास्तव में अपने पेज की CSS फ़ाइल में उस वर्ग के लिए CSS नियम में "कर्सर: पॉइंटर" जोड़ सकते हैं
हमला करें।

1
यदि समस्या लक्ष्यीकरण में से एक है, तो जैसा कि जस्टिन ने पहले से ही पूछा है, और जैसा कि सभी को हमेशा पूछना पड़ता है, पोस्ट कोड इसलिए हम इसे संलग्न करने में आपकी सहायता कर सकते हैं
सिनहेटा

24

यदि आप CSS के बजाय jQuery में ऐसा करना चाहते हैं, तो आप मूल रूप से उसी प्रक्रिया का पालन करते हैं।

आप कुछ है <div id="target"></div>, तो आप निम्न कोड का उपयोग कर सकते हैं:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

और यह करना चाहिए।


3
यह ज़रूरत से ज़्यादा है, क्योंकि एक के लिए कर्सर divहै केवल दिखाई जब माउस यह खत्म हो गया है। उपयोगकर्ता द्वारा किसी भी समय बाहर जाने के बाद इसे हटाने का कोई कारण नहीं है क्योंकि उस समय कर्सर को वैसे भी नहीं देखा जाएगा।
डेविन बर्क

2
जबकि सवाल बहुत संकीर्ण रूप से (DIV के बारे में) पूछा गया था, लेकिन यह उत्तर मोटे तौर पर लागू होता है। यह किसी भी HTML एलिमेंट जैसे टेबल, <p> के बटन, आदि के लिए उपयोगी है, इसीलिए मैंने इसे +1 किया।
PeteH

10

आपको वास्तव में jQuery की जरूरत नहीं है, बस CSS। उदाहरण के लिए, यहाँ कुछ HTML:

<div class="special"></div>

और यहाँ सीएसएस है:

.special
{
    cursor: pointer;
}


0

मुझे लगता है कि :hoverउपरोक्त उत्तरों में गायब था। इसलिए निम्नलिखित जरूरतमंद होगा (यदि सीएसएस आवश्यक था)

#myDiv:hover
{
    cursor: pointer;
}

मेरे बिना काम किया: हॉवर, और संभवतः कई और अधिक के रूप में जवाब सकारात्मक वोट का एक बहुत कुछ है। क्या तुमने कोशिश की?
dading84 12

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