Change cursor to hand when mouse goes over a row in table

Question

How do I change the cursor pointer to hand when my mouse goes over a <tr> in 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>

For an interactive code snippet check my answer – fmagno Jan 15 '20 at 16:39 — fmagno, Jan 15 '20 at 16:39

score 409 · Accepted Answer · edited Oct 13 '18 at 21:40

409

You can do this with CSS actually.

.sortable tr {
    cursor: pointer;
}

edited Oct 13 '18 at 21:40

Gary

3,891
8
38
60

answered Feb 15 '12 at 04:06

dangerChihuahua007

20,299
35
117
206

score 228 · Answer 2 · answered Dec 12 '15 at 18:27

228

I've searched bootstrap styles a bit and found this:

[role=button]{cursor:pointer}

So I assume you can get what you want with:

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

answered Dec 12 '15 at 18:27

Ivan

3,187
1
19
16

It was nice for bootstrap aficionados, but the question does not involve any front framework, so I don't understand why this answer is relevant with the question (even if the answer is great) – Greco Jonathan Jan 31 '18 at 11:21
2

@Hooli as of 6-2018 this is post is now the top result when searching "bootstrap change icon to pointer on hover." – Brian H. Jun 05 '18 at 17:51
1

@OlivierBoissé Just tested and it most definitely DOES work with BS 4 – Gabe Hiemstra Jun 14 '18 at 12:30
2

**Important:** Do not add `role="button"` when you want to add `style="cursor:pointer;"`. First off, your element depends on that CSS being defined elsewhere (and not being overridden elsewhere else) and, most importantly, you are ***misusing the `role` attribute***, simply because most users do not need it. Note most screen readers allow iterating through `[role=button]` elements giving web accessibility challenged users the ability to quickly go through all the page buttons. Don't make them have to go through each of the table's rows to get to the footer links! – tao Sep 16 '19 at 16:03

score 82 · Answer 3 · answered Jun 14 '12 at 17:58

82

The easiest way I've found is to add

style="cursor: pointer;"

to your tags.

answered Jun 14 '12 at 17:58

Ira Herman

2,796
1
23
22

score 30 · Answer 4 · answered Feb 15 '12 at 04:03

30

Add cursor: pointer to your css.

answered Feb 15 '12 at 04:03

James Montagne

77,516
14
110
130

score 21 · Answer 5 · edited Dec 02 '22 at 04:27

21

I added this to my style.css to manage cursor options:

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

edited Dec 02 '22 at 04:27

Michael M.

10,486
9
18
34

answered Oct 15 '14 at 08:59

xackobo

261
2
4

score 14 · Answer 6 · answered Feb 15 '12 at 04:03

14

Use the style cursor: pointer; in the CSS for the element you want the cursor to change on.

In your case, you would use (in your .css file):

.sortable {
    cursor: pointer;
}

answered Feb 15 '12 at 04:03

Chetan

46,743
31
106
145

UbiQue · Answer 7 · 2014-03-18T12:47:11.173

12

For compatibility with IE < 6 use this style in that order:

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

But remember that IE < 7 supports :hover pseudoclass only with <a> element.

edited Mar 18 '14 at 12:47

answered Mar 18 '14 at 12:37

UbiQue

1,521
1
12
10

score 11 · Answer 8 · answered Jan 15 '20 at 16:36

Example with styles 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>

score 10 · Answer 9 · answered Feb 15 '12 at 04:04

Use the CSS cursor property like so:

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

Of course you should put the style into your CSS file and apply it to the class.

The Alpha · Answer 10 · 2012-02-15T04:10:29.590

4

Using css

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

edited Feb 15 '12 at 04:10

answered Feb 15 '12 at 04:05

The Alpha

143,660
29
287
307

score 3 · Answer 11 · answered Apr 14 '16 at 13:30

for just a standard the above solutions work, but if you are using datatables, you have to override the default datatatables.css settings and add the following code to custom css, In the code below row-select is the class that I added on datatables as shown in the html.

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

And you html will look as below:

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

score 0 · Answer 12 · answered Sep 01 '23 at 09:06

0

Seeing this in 2023. Adding btn to the class worked for me in a navbar-nav>li nav-item>a.

answered Sep 01 '23 at 09:06

sathishvj

1,394
2
17
28

Change cursor to hand when mouse goes over a row in table

12 Answers12

Linked