ChatGPT解决这个技术问题 Extra ChatGPT

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>
For an interactive code snippet check my answer

G
Gary

You can do this with CSS actually.

.sortable tr {
    cursor: pointer;
}

This will work perfectly fine without the :hover. cursor defines what the cursor changes to when your mouse is over it.
Any 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 how cursor works and implies that the :hover is needed to change the cursor.
I
Ivan

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>

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)
@Hooli as of 6-2018 this is post is now the top result when searching "bootstrap change icon to pointer on hover."
@OlivierBoissé Just tested and it most definitely DOES work with BS 4
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!
I
Ira Herman

The easiest way I've found is to add

style="cursor: pointer;"

to your tags.


J
James Montagne

Add cursor: pointer to your css.


s
simonthesorcerer

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

not good if you introduce typos along the way (see "croshair")
C
Chetan

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

U
UbiQue

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.


E
EverPresent

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.


f
fmagno

Example with styles inline:

mouse me over: pointer
mouse me over: wait
mouse me over: zoom-in


T
The Alpha

Using css

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

R
Renu

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>

What above solution?