เปลี่ยนเคอร์เซอร์เป็นมือเมื่อวางเมาส์เหนือแถวในตาราง

ฉันจะเปลี่ยนชี้เคอร์เซอร์ไปที่มือวิธีเมื่อเมาส์ของฉันไปมากกว่า<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>

คุณสามารถทำได้ด้วย CSS จริง

.sortable tr {
    cursor: pointer;
}

ฉันค้นหาสไตล์บูตเล็กน้อยและพบสิ่งนี้:

[role=button]{cursor:pointer}

ดังนั้นฉันคิดว่าคุณจะได้รับสิ่งที่คุณต้องการด้วย:

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

วิธีที่ง่ายที่สุดที่ฉันพบคือการเพิ่ม

style="cursor: pointer;"

ไปที่แท็กของคุณ

เพิ่มcursor: pointerลงใน css ของคุณ

ฉันได้เพิ่มสิ่งนี้ไว้ใน style.css ของฉันเพื่อจัดการตัวเลือกเคอร์เซอร์:

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

สำหรับความเข้ากันได้กับ IE <6 ให้ใช้สไตล์นี้ตามลำดับ:

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

แต่จำไว้ว่า IE <7 รองรับ:hoverpseudoclass เฉพาะกับ<a>องค์ประกอบเท่านั้น

ใช้สไตล์cursor: pointer;ใน CSS สำหรับองค์ประกอบที่คุณต้องการให้เคอร์เซอร์เปลี่ยน

ในกรณีของคุณคุณจะใช้ (ในไฟล์. css):

.sortable {
    cursor: pointer;
}

ใช้คุณสมบัติเคอร์เซอร์ CSS เช่นนั้น:

<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 ของคุณและใช้กับคลาส

ใช้ css

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

สำหรับโซลูชันมาตรฐานด้านบนใช้งานได้ แต่ถ้าคุณใช้ DataTable คุณจะต้องแทนที่การตั้งค่าเริ่มต้นและการเพิ่มรหัสต่อไปนี้ไปยัง CSS ที่กำหนดเองในรหัสด้านล่างแถวเลือกเป็นชั้นที่ฉันเพิ่มใน DataTable ดังที่แสดงใน 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>

ตัวอย่างที่มีสไตล์แบบอินไลน์:

<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>