जब उपयोगकर्ता किसी सूची आइटम पर होवर करता है, तो कर्सर को एक हाथ बनाएं

Question

मुझे एक सूची मिली है, और मेरे पास इसके आइटम के लिए एक क्लिक हैंडलर है:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

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

Comments

FYI करें, मैंने आपके प्रश्न को "jquery" हटाकर और "css" जोड़कर आपके प्रश्न की प्रकृति और उसके उत्तर को सही ढंग से दर्शाया।

— क्रिस्टोफर पार्कर

कर्सर को हाथ में बदलने के लिए एक अच्छी संदर्भ सूची और सीएसएस में उपलब्ध अन्य आइकन। javascriptkit.com/dhtmltutors/csscursors.shtml

— नील

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

— क्रिस्टोफ

क्या आपने प्रयास कियाcursor: grab

— devssh

Answer 1

समय बीतने के प्रकाश में, जैसा कि लोगों ने उल्लेख किया है, अब आप सुरक्षित रूप से उपयोग कर सकते हैं:

li { cursor: pointer; }

Comments

यह ध्यान देने योग्य है कि cursor: pointerIE 5.5 से अधिक के लिए बस सब कुछ करना अच्छा है: quirksmode.org/css/cursor.html

— ripper234

यह कितना अजीब सूचक है! = कर्सर और हाथ! = सूचक, और भी भ्रम की स्थिति को जोड़ता है। :)

— हेनरिक एर्लडसन

ध्यान दें, quirksmode.org/css/user-interface/cursor.html#note (पहले की टिप्पणी में संदर्भित) में कहा गया है कि हाथ को सूचक के बाद आना चाहिए । मैं सिर्फ सूचक का उपयोग करने की सलाह देता हूं - IE 5.5 IE 6. से अधिक

— गहरा है

@EdwardBlack यह उन अजीब ब्राउज़रों के लिए आवश्यक हुआ करता था, जो मानकों के अनुरूप नहीं थे, नए तरीके को प्रतिबिंबित करने के लिए उत्तर बहुत पहले अपडेट किया गया था जो कि बस pointerयह प्रश्न 5 साल से अधिक पुराना btw है।

— आरन

वास्तव में। यदि आप IE को IE5 संगतता मोड में चलाते हैं, तब cursor:pointerभी काम करता है। इसलिए अगर कभी उपयोग करने का बहाना था cursor:hand, तो अब नहीं है।

— श्री लिस्टर

Answer 2

इसके लिए उपयोग करें li:

li:hover {
    cursor: pointer;
}

स्निपेट विकल्प चलाने के बाद उदाहरण के साथ अधिक कर्सर गुण देखें:

.auto          { cursor: auto; }
.default       { cursor: default; }
.none          { cursor: none; }
.context-menu  { cursor: context-menu; }
.help          { cursor: help; }
.pointer       { cursor: pointer; }
.progress      { cursor: progress; }
.wait          { cursor: wait; }
.cell          { cursor: cell; }
.crosshair     { cursor: crosshair; }
.text          { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias         { cursor: alias; }
.copy          { cursor: copy; }
.move          { cursor: move; }
.no-drop       { cursor: no-drop; }
.not-allowed   { cursor: not-allowed; }
.all-scroll    { cursor: all-scroll; }
.col-resize    { cursor: col-resize; }
.row-resize    { cursor: row-resize; }
.n-resize      { cursor: n-resize; }
.e-resize      { cursor: e-resize; }
.s-resize      { cursor: s-resize; }
.w-resize      { cursor: w-resize; }
.ns-resize     { cursor: ns-resize; }
.ew-resize     { cursor: ew-resize; }
.ne-resize     { cursor: ne-resize; }
.nw-resize     { cursor: nw-resize; }
.se-resize     { cursor: se-resize; }
.sw-resize     { cursor: sw-resize; }
.nesw-resize   { cursor: nesw-resize; }
.nwse-resize   { cursor: nwse-resize; }

.cursors > div {
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) {
       background: #eee;
    }
    &:hover {
       opacity: 0.25
    }
}

<h1>Example of cursor</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>

Comments

ऑफ टॉपिक, आपने उस जिफ एनीमेशन को किस सॉफ्टवेयर का उपयोग किया? प्रतीक्षा .. @ संतोष

— खलसे

@ fWd82 चेक शेयरएक्स - रिकॉर्ड ए गिफ

— हिडेन

मैंने महसूस किया कि यह अभिशापों का एक उपयोगी अनुस्मारक था और एक उपकरण के रूप में कोड को जोड़ा। यहाँ ऊपर दिए गए कोड का लिंक दिया गया है: spragucm.com/web-css-cursor-pointers

— Chris Sprague

बहुत बढ़िया एनीमेशन! @ fWd82 - पीक आपकी स्क्रीन के एक क्षेत्र के गिफ को रिकॉर्ड करने के लिए भी अच्छा है। github.com/phw/peek

— शरद ऋतु लियोनार्ड

हा - यह अद्भुत है! साभार @ संतोष-खलसे

— sufinawaz

Answer 3

इसके लिए आपको jQuery की आवश्यकता नहीं है, बस निम्नलिखित सीएसएस सामग्री का उपयोग करें:

li {cursor: pointer}

और वॉयला! हैंडी।

Comments

हैंडी? हम्म ... मैं देख रहा हूँ कि तुम क्या देखते ही किया, @ Denis-Alpheus-cahuk

— ओसीरसि

Answer 4

उपयोग:

li:hover {
    cursor: pointer;
}

अन्य मान्य मान (जो handहै नहीं ) वर्तमान HTML विनिर्देश के लिए देखी जा सकती है यहाँ ।

Comments

मुझे समझ में नहीं आ रहा है कि :hoverइस मामले में छद्म वर्ग का उपयोग क्या है। क्या कोई भिन्न कर्सर निर्दिष्ट करने का कोई लाभ है जब माउस तत्व को नहीं उठाता है ? इसके अलावा मैं पढ़ता हूं कि li:hoverIE6 में काम नहीं करता है।

— राबर्ट

मुझे लगता :hoverहै कि यह सिर्फ विशिष्टता के लिए है, @ रॉबर्ट। मैं MSIE के किसी भी संस्करण में समर्थन के लिए परीक्षण नहीं कर सकता, क्षमा करें, लेकिन यह मुझे आश्चर्य नहीं होगा अगर यह काम नहीं करता! : पी

— एलिस्टेयर

handशीर्ष जवाब में क्यों है , भले ही यह काम नहीं कर रहा है?

— ब्लैक

@EdwardBlack cursor: handको डीएससी की श्रेणी में नहीं रखा गया है। यह ie5-6 के युग की तरह है। केवल उपयोग करें pointer।

— नॉर्थहेमराइकन

Answer 5

उपयोग

cursor: pointer;
cursor: hand;

यदि आप एक crossbrowser परिणाम है चाहता हूँ!

Comments

यह 2018 है, और कर्सर: क्रॉस ब्राउज़र विकास के लिए हाथ की आवश्यकता नहीं है?

— हरमोज़

Answer 6

सीएसएस:

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

आपके पास कर्सर भी एक छवि हो सकता है:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

Comments

यह सवाल का जवाब नहीं है।

यह शायद सवाल का सीधा जवाब नहीं है लेकिन यह एक बहुत अच्छा दिशानिर्देश है। जो भी हो धन्यवाद!

— चितरचांको

Answer 7

मुझे लगता है कि जावास्क्रिप्ट उपलब्ध होने पर केवल हाथ / सूचक कर्सर दिखाने के लिए यह स्मार्ट होगा। इसलिए लोगों को यह महसूस नहीं होगा कि वे उस चीज पर क्लिक कर सकते हैं जो क्लिक करने योग्य नहीं है।

यह हासिल करने के लिए कि आप सीएसएस लिबर्टी jQuery का उपयोग कर सकते हैं ताकि सीएसएस को तत्व में जोड़ा जा सके

$("li").css({"cursor":"pointer"});

या इसे सीधे क्लिक हैंडलर को चेन करें।

या जब संयोजन के साथ आधुनिकीकरण<html class="no-js"> का उपयोग किया जाता है, तो सीएसएस इस तरह दिखाई देगा:

.js li { cursor: pointer; }

Answer 8

li:hover {cursor: hand; cursor: pointer;}

Answer 9

पूर्णता के लिए:

cursor: -webkit-grab;

यह एक हाथ भी देता है, जिसे आप एक छवि के दृश्य को चारों ओर ले जाते समय जानते हैं।

यह काफी उपयोगी है यदि आप jQuery और मूसडाउन का उपयोग करके हड़प व्यवहार का अनुकरण करना चाहते हैं ।

Answer 10

पूर्ण क्रॉस ब्राउज़र के लिए, उपयोग करें:

cursor: pointer;
cursor: hand;

Answer 11

बस कुछ इस तरह से करें:

li { 
  cursor: pointer;
}

मैं इसे आपके कोड पर लागू करता हूं यह देखने के लिए कि यह कैसे काम करता है:

li {
  cursor: pointer;
}

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

नोट: इसके अलावा मत भूलना आप अनुकूलित कर्सर के साथ किसी भी हाथ कर्सर कर सकते हैं, आप उदाहरण के लिए इस तरह एक fav हाथ आइकन बना सकते हैं:

div {
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}

<div>
</div>

Answer 12

कुछ भी "मूसचेंज" उपचार प्राप्त करने में सक्षम होने के लिए, आप एक सीएसएस क्लास जोड़ सकते हैं:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

मैं cursor:handइसका उपयोग करने के लिए नहीं कहूंगा क्योंकि यह केवल इंटरनेट एक्सप्लोरर 5.5 और नीचे के लिए मान्य था, और इंटरनेट एक्सप्लोरर 6 विंडोज एक्सपी (2002) के साथ आया था। लोगों को केवल तभी अपग्रेड करने का संकेत मिलेगा जब उनका ब्राउज़र उनके लिए काम करना बंद कर देगा। इसके अतिरिक्त, विजुअल स्टूडियो में, यह उस प्रविष्टि को लाल कर देगा। यह मुझे बताता है:

सत्यापन (सीएसएस 3.0): "हाथ" "कर्सर" संपत्ति के लिए एक वैध मूल्य नहीं है

Answer 13

ul li:hover{
   cursor: pointer;
}

Answer 14

अन्य सभी प्रतिक्रियाएं मानक सीएसएस पॉइंटर का उपयोग करने का सुझाव देती हैं, हालांकि, दो तरीके हैं:

1. सीएसएस संपत्ति लागू करें cursor:pointer;तत्वों के लिए । (यह एक डिफ़ॉल्ट शैली है जब एक बटन पर कर्सर घूमता है।)

2. सीएसएस संपत्ति लागू करें cursor:url(pointer.png);अपने पॉइंटर के लिए एक कस्टम ग्राफिक का उपयोग करके । यह अधिक वांछनीय हो सकता है यदि आप यह सुनिश्चित करना चाहते हैं कि उपयोगकर्ता का अनुभव सभी प्लेटफार्मों पर समान है (इसके बजाय ब्राउज़र / ओएस यह तय करने की अनुमति दें कि आपका सूचक कर्सर कैसा दिखना चाहिए)। ध्यान दें कि द्वितीयक यूआरएल या अन्य विकल्पों में से किसी भी तरह की छवि के न मिलने पर छवि में गिरावट के विकल्प जोड़े जा सकते हैंcursor:url(pointer.png,fallback.png,pointer);

बेशक, इन्हें इस तरह से सूची में लागू किया जा सकता है li{cursor:pointer;}, एक वर्ग के रूप में .class{cursor:pointer;}, या प्रत्येक तत्व की शैली विशेषता के लिए एक मूल्य के रूप में style="cursor:pointer;"।

Answer 15

उपयोग:

ul li:hover{
   cursor: pointer;
}

अधिक माउस ईवेंट के लिए, CSS कर्सर प्रॉपर्टी की जाँच करें ।

Comments

डुप्लिकेट उत्तर। लिंक को अन्य उत्तर के लिए संपादित के रूप में जोड़ा जाना चाहिए। दिसम्बर 21, 2014 user3776645 द्वारा।

— vapcguy

Answer 16

आप निम्न में से किसी एक का उपयोग कर सकते हैं:

li:hover
{
 cursor: pointer;
}

या

li
{
 cursor: pointer;
}

कार्य उदाहरण 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

कार्य उदाहरण 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Answer 17

आप नीचे दिए गए कोड का उपयोग कर सकते हैं:

li:hover { cursor: pointer; }

Answer 18

एक बुनियादी हाथ प्रतीक के लिए:

प्रयत्न

cursor: pointer 

यदि आप एक हाथ का प्रतीक चाहते हैं, जैसे कुछ आइटम खींचें और उसे छोड़ें, कोशिश करें:

cursor: grab

Answer 19

आप निम्नलिखित शैली का भी उपयोग कर सकते हैं:

li {
    cursor: grabbing;
}

Answer 20

HTML हैक का उपयोग करना

नोट: यह अनुशंसित नहीं है क्योंकि इसे बुरा अभ्यास माना जाता है

एक एंकर टैग में सामग्री को लपेटना एक hrefविशेषता युक्त cursor: pointer;है, एंकर गुणों के साइड इफेक्ट के साथ संपत्ति को स्पष्ट रूप से लागू किए बिना काम करेगा (सीएसएस के साथ संशोधित):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

Comments

यह काम नहीं करता है। एंकर टैग्स में केवल अंडरलाइनर के साथ एक पॉइंटर कर्सर और एक अलग रंग होता है अगर उनके पास एक href हो।

— अरटीयर

"जब उपयोगकर्ता किसी सूची आइटम पर घूमता है तो मैं कर्सर को हाथ कैसे लगा सकता हूं?" - इस विशेष प्रश्न के लिए, यह करता है। लेकिन जैसा कि @sandrooco ने बताया कि यह एक अच्छा अभ्यास नहीं है।

— रोहित नायर

Answer 21

निम्नलिखित की जाँच करें। मैं इसे W3Schools से प्राप्त करता हूं ।

<!DOCTYPE html>
<html>
    <head>
        <style>
        .alias {cursor: alias;}
        .all-scroll {cursor: all-scroll;}
        .auto {cursor: auto;}
        .cell {cursor: cell;}
        .context-menu {cursor: context-menu;}
        .col-resize {cursor: col-resize;}
        .copy {cursor: copy;}
        .crosshair {cursor: crosshair;}
        .default {cursor: default;}
        .e-resize {cursor: e-resize;}
        .ew-resize {cursor: ew-resize;}
        .grab {cursor: -webkit-grab; cursor: grab;}
        .grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
        .help {cursor: help;}
        .move {cursor: move;}
        .n-resize {cursor: n-resize;}
        .ne-resize {cursor: ne-resize;}
        .nesw-resize {cursor: nesw-resize;}
        .ns-resize {cursor: ns-resize;}
        .nw-resize {cursor: nw-resize;}
        .nwse-resize {cursor: nwse-resize;}
        .no-drop {cursor: no-drop;}
        .none {cursor: none;}
        .not-allowed {cursor: not-allowed;}
        .pointer {cursor: pointer;}
        .progress {cursor: progress;}
        .row-resize {cursor: row-resize;}
        .s-resize {cursor: s-resize;}
        .se-resize {cursor: se-resize;}
        .sw-resize {cursor: sw-resize;}
        .text {cursor: text;}
        .url {cursor: url(myBall.cur),auto;}
        .w-resize {cursor: w-resize;}
        .wait {cursor: wait;}
        .zoom-in {cursor: zoom-in;}
        .zoom-out {cursor: zoom-out;}
        </style>
    </head>

    <body>
        <h1>The cursor property</h1>
        <p>Mouse over the words to change the mouse cursor.</p>

        <p class="alias">alias</p>
        <p class="all-scroll">all-scroll</p>
        <p class="auto">auto</p>
        <p class="cell">cell</p>
        <p class="context-menu">context-menu</p>
        <p class="col-resize">col-resize</p>
        <p class="copy">copy</p>
        <p class="crosshair">crosshair</p>
        <p class="default">default</p>
        <p class="e-resize">e-resize</p>
        <p class="ew-resize">ew-resize</p>
        <p class="grab">grab</p>
        <p class="grabbing">grabbing</p>
        <p class="help">help</p>
        <p class="move">move</p>
        <p class="n-resize">n-resize</p>
        <p class="ne-resize">ne-resize</p>
        <p class="nesw-resize">nesw-resize</p>
        <p class="ns-resize">ns-resize</p>
        <p class="nw-resize">nw-resize</p>
        <p class="nwse-resize">nwse-resize</p>
        <p class="no-drop">no-drop</p>
        <p class="none">none</p>
        <p class="not-allowed">not-allowed</p>
        <p class="pointer">pointer</p>
        <p class="progress">progress</p>
        <p class="row-resize">row-resize</p>
        <p class="s-resize">s-resize</p>
        <p class="se-resize">se-resize</p>
        <p class="sw-resize">sw-resize</p>
        <p class="text">text</p>
        <p class="url">url</p>
        <p class="w-resize">w-resize</p>
        <p class="wait">wait</p>
        <p class="zoom-in">zoom-in</p>
        <p class="zoom-out">zoom-out</p>
    </body>
</html>

Answer 22

बस कर्सर पॉइंटर को कस्टमाइज़ करने के लिए सीएसएस का उपयोग करना

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

/* Keyword value */
cursor: pointer;
cursor: auto;

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

डेमो

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

हाथ की छवि

li:hover{
   cursor: url("../icons/hand.cur"), pointer;
}