css उपाय - जब उपयोगकर्ता किसी सूची आइटम पर हो जाता है तो मैं कर्सर को हाथ कैसे बना सकता हूं?




का हिंदी (17)

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

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

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


Answers

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

cursor: -webkit-grab;

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

यदि आप jquery और mousedown का उपयोग कर हथियार व्यवहार का अनुकरण करना चाहते हैं तो काफी उपयोगी।


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

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

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

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


li:hover {
    cursor: pointer;
}

वर्तमान HTML spec के लिए अन्य वैध मान (कौन सा hand नहीं है ) here देखा जा सकता here


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

li {cursor: pointer}

और voilà! हैंडी।


यह धागा हाथ से बाहर हो रहा है, यह जल्दी से कर्सर से स्ट्रिंग उपकरणों तक चला गया। :)

शुक्र है कि Google हमेशा मुझे यहां भेजता है जब मुझे पूर्ण क्रॉस ब्राउज़र के लिए त्वरित अनुस्मारक की आवश्यकता होती है, तो इसका उपयोग करें:

cursor: pointer;
cursor: hand;

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

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

li {
      cursor: grabbing;
   }

उपयोग

cursor: pointer;
cursor: hand;

यदि आप एक क्रॉसब्रोसर परिणाम चाहते हैं!


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

.mousechange:hover {
  cursor: pointer;
}
<span class="mousechange">Some text here</span>

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

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


बस सीएसएस या जेएस का उपयोग किए बिना

एक एंकर टैग के साथ सामग्री को लपेटना काम करेगा ....

 <a><i class="uk-icon-hover uk-icon-info-circle uk-icon-medium"  data-uk-tooltip="{pos:'right'}" title="Some Tooltip Here" aria-hidden="true"></i></a>

मेरी आशा है कि इससे काम हो जाए....


बस कुछ ऐसा ही करें:

li { 
  cursor: pointer;
}

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

li {
  cursor: pointer;
}
<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

नोट: यह भी भूलें कि आपके पास कस्टमाइज्ड कर्सर के साथ कोई भी हाथ कर्सर हो सकता है, उदाहरण के लिए आप इस तरह के एफएवी हैंड आइकन बना सकते हैं:

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>


यह काम करना चाहिए

<style>
li:hover{
    cursor: hand;
}
</style>


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

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

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

या सीधे क्लिक हैंडलर पर श्रृंखला।

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

.js li { cursor: pointer; }

ul li:hover{
   cursor: pointer;
}

ली के लिए प्रयोग करें

li:hover{
 cursor: pointer;
}

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

.auto            { cursor: auto; }
.deafult         { 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>


सीएसएस कर्सर संपत्ति का उपयोग इस प्रकार करें:

<table class="sortable">
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

बेशक आपको शैली को अपनी सीएसएस फ़ाइल में रखना चाहिए और इसे कक्षा में लागू करना चाहिए।







css