Ubah kursor ke tangan ketika mouse melewati satu baris dalam tabel

201

Bagaimana cara mengubah kursor kursor ke tangan ketika mouse saya masuk <tr>dalam a<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>
html css cursor Zeeshan Rang
sumber
Untuk cuplikan kode interaktif, periksa jawaban saya
fmagno

Jawaban:

350

Anda dapat melakukan ini dengan CSS sebenarnya.

.sortable tr {
    cursor: pointer;
}
hazardChihuahua007
sumber
21
Ini akan bekerja dengan baik tanpa :hover. cursormendefinisikan perubahan kursor saat mouse Anda mengatasinya.
James Montagne
3
Apakah Anda bisa mengubah jawaban ini untuk menghapus yang tidak dibutuhkan :hover? Pertanyaannya masih mendapat perhatian 2 tahun kemudian dan alangkah baiknya jika jawaban yang diterima tidak menyarankan penggunaan yang :hovertidak perlu. Saya pikir itu mengarah pada kesalahpahaman tentang cara cursorkerjanya dan menyiratkan bahwa :hoverdiperlukan untuk mengubah kursor.
James Montagne
203

Saya telah mencari sedikit gaya bootstrap dan menemukan ini:

[role=button]{cursor:pointer}

Jadi saya berasumsi Anda bisa mendapatkan apa yang Anda inginkan:

<span role="button">hi</span>
Ivan
sumber
Itu bagus untuk penggemar bootstrap, tetapi pertanyaannya tidak melibatkan kerangka kerja depan, jadi saya tidak mengerti mengapa jawaban ini relevan dengan pertanyaan (bahkan jika jawabannya hebat)
Greco Jonathan
@Hooli pada 6-2018 posting ini sekarang adalah hasil teratas ketika mencari "ikon perubahan bootstrap untuk mengarahkan pada hover."
BrianHVB
1
@ OlivierBoissé Baru saja diuji dan pasti JANGAN bekerja dengan BS 4
Gabe Hiemstra
1
Penting: Jangan menambahkan role="button"ketika Anda ingin menambahkan style="cursor:pointer;". Pertama, elemen Anda tergantung pada CSS yang didefinisikan di tempat lain (dan tidak diganti di tempat lain) dan, yang paling penting, Anda menyalahgunakan roleatribut , hanya karena sebagian besar pengguna tidak membutuhkannya. Perhatikan bahwa sebagian besar pembaca layar membolehkan pengulangan[role=button] elemen yang memberikan aksesibilitas web yang menantang bagi pengguna kemampuan untuk dengan cepat menelusuri semua tombol halaman. Jangan membuat mereka harus melalui setiap baris tabel untuk sampai ke tautan footer!
tao
75

Cara termudah yang saya temukan adalah menambahkan

style="cursor: pointer;"

ke tag Anda.

Ira Herman
sumber
23

Tambahkan cursor: pointerke css Anda.

James Montagne
sumber
17

Saya menambahkan ini ke style.css saya untuk mengelola opsi kursor:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
xackobo
sumber
1
tidak baik jika Anda memasukkan kesalahan ketik di sepanjang jalan (lihat "croshair")
pengamat
12

Untuk kompatibilitas dengan IE <6 gunakan gaya ini dalam urutan itu:

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

Tetapi ingat bahwa IE <7 mendukung :hoverpseudoclass hanya dengan <a>elemen.

UbiQue
sumber
10

Gunakan gaya cursor: pointer;di CSS untuk elemen yang Anda inginkan untuk mengubah kursor.

Dalam kasus Anda, Anda akan menggunakan (dalam file .css Anda):

.sortable {
    cursor: pointer;
}
Chetan
sumber
9

Gunakan properti kursor CSS seperti:

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

Tentu saja Anda harus meletakkan style ke dalam file CSS Anda dan menerapkannya ke kelas.

Hadir
sumber
4

Menggunakan css 

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

hanya untuk standar solusi di atas berfungsi, tetapi jika Anda menggunakan datatables, Anda harus mengganti pengaturan default datatatables.css dan menambahkan kode berikut ke custom css, Pada kode di bawah ini, baris-pilih adalah kelas yang saya tambahkan pada datatables seperti yang ditunjukkan pada html.

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

Dan Anda html akan terlihat seperti di bawah ini:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
Renu
sumber
Apa solusi di atas?
Kmeixner
2

Contoh dengan gaya inline:

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

fmagno
sumber