Change cursor to hand when mouse goes over a row in table
HtmlCssMouse CursorHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
You can do this with CSS actually.
.sortable tr {
cursor: pointer;
}
Solution 2 - Html
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>
Solution 3 - Html
The easiest way I've found is to add
style="cursor: pointer;"
to your tags.
Solution 4 - Html
Add cursor: pointer
to your css.
Solution 5 - Html
I added this to my style.css to manage cursor options:
.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
Solution 6 - Html
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;
}
Solution 7 - Html
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.
Solution 8 - Html
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.
Solution 9 - Html
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>
Solution 10 - Html
Using css
table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
Solution 11 - Html
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>