जब माउस तालिका में एक पंक्ति से अधिक हो जाता है, तो हाथ में कर्सर बदलें

Question

मैं हाथ करने के लिए कर्सर सूचक कैसे बदल सकता हूँ जब मेरे माउस एक के ऊपर जाता है <tr>एक में<table>

<table class="sortable" border-style:>
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr><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>

Comments

एक इंटरैक्टिव कोड स्निपेट के लिए मेरे उत्तर की जांच करें

— fmagno

Answer 1

आप ऐसा CSS के साथ वास्तव में कर सकते हैं।

.sortable tr {
    cursor: pointer;
}

Comments

यह बिना पूरी तरह से ठीक काम करेगा :hover। cursorपरिभाषित करता है कि जब आपका माउस इसके ऊपर है तो कर्सर क्या बदलता है।

— जेम्स मॉन्टेन

कोई भी मौका जो आप इस उत्तर को संशोधित कर सकते हैं को हटा दें :hover? प्रश्न 2 साल बाद भी ध्यान आकर्षित करता है और यह अच्छा होगा यदि स्वीकृत उत्तर :hoverअनावश्यक रूप से उपयोग करने का सुझाव नहीं दे रहा है । मुझे लगता है कि यह गलतफहमी की ओर ले जाता cursorहै कि कैसे काम करता है और इसका मतलब है कि :hoverकर्सर को बदलने की आवश्यकता है।

— जेम्स मॉन्टेन

Answer 2

मैंने बूटस्ट्रैप शैलियों को थोड़ा खोजा है और यह पाया है:

[role=button]{cursor:pointer}

इसलिए मुझे लगता है कि आप जो चाहते हैं वह प्राप्त कर सकते हैं:

<span role="button">hi</span>

Comments

बूटस्ट्रैप aficionados के लिए यह अच्छा था, लेकिन प्रश्न में कोई फ्रंट फ्रेमवर्क शामिल नहीं है, इसलिए मुझे समझ में नहीं आता है कि यह उत्तर प्रश्न के साथ प्रासंगिक क्यों है (भले ही उत्तर महान हो)

— ग्रीको जोनाथन

@Hooli 6-2018 तक यह पोस्ट अब शीर्ष परिणाम है, जब "बूटस्ट्रैप चेंज आइकन को पॉइंटर पर पॉइंटर करने के लिए" सर्च किया जाता है।

— ब्रायनएचवीबी

@ OlivierBoissé बस परीक्षण किया गया है और यह सबसे निश्चित रूप से बीएस 4 के साथ काम करता है

— गैब हीमस्ट्रा

महत्वपूर्ण:role="button" जब आप जोड़ना चाहें तब न जोड़ें style="cursor:pointer;"। सबसे पहले, आपका तत्व इस बात पर निर्भर करता है कि सीएसएस को कहीं और परिभाषित किया जा रहा है (और कहीं और ओवरराइड नहीं किया जा रहा है) और, सबसे महत्वपूर्ण बात, आप विशेषता का दुरुपयोगrole कर रहे हैं , सिर्फ इसलिए कि अधिकांश उपयोगकर्ताओं को इसकी आवश्यकता नहीं है। ध्यान दें कि अधिकांश स्क्रीन रीडर्स [role=button]वेब एक्सेसिबिलिटी देने वाले तत्वों के माध्यम से पुनरावृत्ति की अनुमति देते हैं जो उपयोगकर्ताओं को सभी पेज बटन के माध्यम से जल्दी से जाने की क्षमता देता है। उन्हें पाद लिंक पर जाने के लिए तालिका की प्रत्येक पंक्तियों से गुजरना नहीं पड़ता है!

— ताओ

Answer 3

मुझे जो सबसे आसान तरीका मिला है वह है जोड़ना

style="cursor: pointer;"

आपके टैग के लिए।

Answer 4

cursor: pointerअपनी सीएसएस में जोड़ें ।

Answer 5

मैंने इसे अपनी शैली में जोड़ा। कर्सर विकल्पों का प्रबंधन करने के लिए:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}

Comments

अच्छा नहीं है यदि आप टाइपो का परिचय देते हैं ("क्रॉशर" देखें)

— पर्यवेक्षक

Answer 6

IE <6 के साथ संगतता के लिए इस क्रम में इस शैली का उपयोग करें:

.sortable:hover {
    cursor: pointer;
    cursor: hand;
}

लेकिन याद रखें कि IE <7 :hoverकेवल <a>तत्व के साथ स्यूडोकलास का समर्थन करता है।

Answer 7

cursor: pointer;उस तत्व के लिए CSS में शैली का उपयोग करें जिस पर आप कर्सर बदलना चाहते हैं।

आपके मामले में, आप (अपनी .css फ़ाइल में) का उपयोग करेंगे:

.sortable {
    cursor: pointer;
}

Answer 8

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

<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 फ़ाइल में डालना चाहिए और उसे क्लास में लागू करना चाहिए।

Answer 9

सीएसएस का उपयोग करना

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/

Answer 10

बस एक मानक के लिए उपरोक्त समाधान काम करते हैं, लेकिन यदि आप डेटाटैबल्स का उपयोग कर रहे हैं, तो आपको डिफ़ॉल्ट डेटाटैबल्स.css सेटिंग्स को ओवरराइड करना होगा और कस्टम सीएसएस में निम्नलिखित कोड जोड़ना होगा। पंक्ति-चयन के नीचे दिए गए कोड में वह वर्ग है जिसे मैंने डेटाटैबल्स में जोड़ा है जैसा कि html में दिखाया गया है।

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

और आप HTML नीचे के रूप में देखेंगे:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>

Comments

क्या समाधान है?

— केमिक्नर

Answer 11

शैलियों इनलाइन के साथ उदाहरण:

<table>
  <tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
  <tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
  <tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>