Thay đổi con trỏ thành tay khi chuột đi qua một hàng trong bảng

Làm thế nào để thay đổi con trỏ trỏ đến tay khi con chuột của tôi đi qua một <tr>trong một<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>

Bạn có thể làm điều này với CSS thực sự.

.sortable tr {
    cursor: pointer;
}

Tôi đã tìm kiếm các kiểu bootstrap một chút và tìm thấy điều này:

[role=button]{cursor:pointer}

Vì vậy, tôi giả sử bạn có thể có được những gì bạn muốn với:

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

Cách dễ nhất tôi tìm thấy là thêm

style="cursor: pointer;"

vào thẻ của bạn.

Thêm cursor: pointervào css của bạn.

Tôi đã thêm nó vào style.css của mình để quản lý các tùy chọn con trỏ:

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

Để tương thích với IE <6, hãy sử dụng kiểu này theo thứ tự đó:

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

Nhưng hãy nhớ rằng IE <7 chỉ hỗ trợ :hoverpseudoclass với <a>phần tử.

Sử dụng phong cách cursor: pointer; trong CSS cho phần tử bạn muốn con trỏ thay đổi.

Trong trường hợp của bạn, bạn sẽ sử dụng (trong tệp .css của mình):

.sortable {
    cursor: pointer;
}

Sử dụng thuộc tính con trỏ CSS như vậy:

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

Tất nhiên bạn nên đặt kiểu vào tệp CSS của mình và áp dụng nó cho lớp.

Sử dụng css

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

đối với chỉ một tiêu chuẩn, các giải pháp trên hoạt động, nhưng nếu bạn đang sử dụng datatables, bạn phải ghi đè cài đặt datatatables.css mặc định và thêm mã sau vào css tùy chỉnh, Trong mã bên dưới chọn hàng là lớp tôi đã thêm vào datatables như thể hiện trong html.

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

Và bạn html sẽ trông như dưới đây:

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

Ví dụ với kiểu nội tuyến:

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