টেবিলে মাউস একটি সারিতে চলে গেলে কার্সারটি হাতের কাছে পরিবর্তন করুন

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

আপনি আসলে সিএসএস দিয়ে এটি করতে পারেন।

.sortable tr {
    cursor: pointer;
}

Comments

এটি ছাড়া পুরোপুরি সূক্ষ্ম কাজ করবে :hover। cursorআপনার মাউসটি শেষ হয়ে গেলে কার্সারটিতে কী পরিবর্তন হবে তা নির্ধারণ করে।

— জেমস মন্টাগন

অপ্রয়োজনীয় অপসারণের জন্য আপনি এই উত্তরটি পরিবর্তন করতে পারেন এমন কোনও সুযোগ :hover? প্রশ্নটি এখনও 2 বছর পরে মনোযোগ পেয়েছে এবং যদি গৃহীত উত্তরটি :hoverঅকারণে ব্যবহারের পরামর্শ না দেয় তবে এটি দুর্দান্ত হবে । আমি মনে করি এটি কীভাবে cursorকাজ করে এবং ইঙ্গিত দেয় যে :hoverকার্সারটি পরিবর্তনের জন্য এটির প্রয়োজনীয়তা রয়েছে তা নিয়ে একটি ভুল বোঝাবুঝির কারণ হয়।

— জেমস মন্টাগন

Answer 2

আমি বুটস্ট্র্যাপের স্টাইলগুলি কিছুটা অনুসন্ধান করেছি এবং এটি পেয়েছি:

[role=button]{cursor:pointer}

সুতরাং আমি ধরে নিলাম আপনি যা চান তা পেতে পারেন:

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

Comments

এটি বুটস্ট্র্যাপ আফিকোনাডোসের জন্য দুর্দান্ত ছিল, তবে প্রশ্নটিতে কোনও সামনের কাঠামো জড়িত না, তাই কেন এই উত্তরটি প্রশ্নের সাথে প্রাসঙ্গিক তা আমি বুঝতে পারি না (উত্তরটি দুর্দান্ত হলেও)

— গ্রিকো জোনাথন

"হোলির পয়েন্টারে বুটস্ট্র্যাপ চেহারার আইকনটি" অনুসন্ধানের সময় 6--৮০৮-এর হিসাবে হুলি এটি পোস্ট এখন শীর্ষ ফলাফল।

— ব্রায়ানএইচভিবি

@ অলিভিয়ারবইস- মাত্র পরীক্ষা করা হয়েছে এবং এটি অবশ্যই বিএস 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;
}

তবে মনে রাখবেন যে আই << 7 :hoverকেবলমাত্র <a>উপাদান দিয়ে সিউডোক্লাস সমর্থন করে ।

Answer 7

cursor: pointer;আপনি যে উপাদানটি কার্সারটি চালু করতে চান তার জন্য সিএসএসে স্টাইলটি ব্যবহার করুন।

আপনার ক্ষেত্রে, আপনি (আপনার .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>

অবশ্যই আপনার স্টাইলটি আপনার সিএসএস ফাইলে রাখা উচিত এবং এটি ক্লাসে প্রয়োগ করা উচিত।

Answer 9

সিএসএস ব্যবহার করে

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

Answer 10

উপরের সমাধানগুলি কেবলমাত্র কোনও মানদণ্ডের জন্য কাজ করে, তবে আপনি যদি ডেটাটাবল ব্যবহার করেন তবে আপনাকে ডিফল্ট ডেটাট্যাব্যাটেলস CSS সেটিংসকে ওভাররাইড করতে হবে এবং কাস্টম সিএসএসের জন্য নিম্নলিখিত কোডটি যুক্ত করতে হবে, সারি-নির্বাচনের নীচে কোডে আমি ডাটাবেলগুলিতে ক্লাসটি যোগ করেছি এইচটিএমএল হিসাবে দেখানো হয়েছে।

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

এবং আপনি এইচটিএমএল নীচের মত দেখতে পাবেন:

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

Comments

সমাধান কি?

— Kmeixner

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>