Change cursor to hand when mouse goes over a row in table
479,278
Solution 1
You can do this with CSS actually.
.sortable tr {
cursor: pointer;
}
Solution 2
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
The easiest way I've found is to add
style="cursor: pointer;"
to your tags.
Solution 4
Add cursor: pointer
to your css.
Solution 5
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;}
Related videos on Youtube
Author by
Zeeshan Rang
Updated on December 23, 2021Comments
-
Zeeshan Rang over 2 years
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>
-
fmagno over 4 yearsFor an interactive code snippet check my answer
-
-
James Montagne about 12 yearsThis will work perfectly fine without the
:hover
.cursor
defines what the cursor changes to when your mouse is over it. -
James Montagne about 10 yearsAny chance you could modify this answer to remove the unneeded
:hover
? The question still gets attention 2 years later and it would be nice if the accepted answer wasn't suggesting using:hover
unnecessarily. I think it leads to a misunderstanding of howcursor
works and implies that the:hover
is needed to change the cursor. -
Kmeixner about 8 yearsWhat above solution?
-
observer over 6 yearsnot good if you introduce typos along the way (see "croshair")
-
Greco Jonathan over 6 yearsIt 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)
-
Brian H. almost 6 years@Hooli as of 6-2018 this is post is now the top result when searching "bootstrap change icon to pointer on hover."
-
Gabe Hiemstra almost 6 years@OlivierBoissé Just tested and it most definitely DOES work with BS 4
-
tao over 4 yearsImportant: Do not add
role="button"
when you want to addstyle="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 therole
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!