Reputation: 19875

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

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>

Upvotes: 251

Answers (12)

sathishvj

Reputation: 1464

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

Upvotes: 0

xackobo

Reputation: 361

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

Upvotes: 21

fmagno

Reputation: 1548

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>

Upvotes: 13

dangerChihuahua007

Reputation: 20895

You can do this with CSS actually.

.sortable tr {
    cursor: pointer;
}

Upvotes: 415

Renu

Reputation: 41

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>

Upvotes: 3

Ivan

Reputation: 3297

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>

Upvotes: 234

UbiQue

Reputation: 1571

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.

Upvotes: 12

Ira Herman

Reputation: 2826

The easiest way I've found is to add

style="cursor: pointer;"

to your tags.

Upvotes: 83

The Alpha

Reputation: 146191

Using css

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

Upvotes: 4

EverPresent

Reputation: 1970

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.

Upvotes: 10