html - punteros - Cambie el cursor a la mano cuando el mouse vaya sobre una fila en la tabla

manita en css

Question

¿Cómo cambio el puntero del cursor a la mano cuando mi mouse pasa sobre un <tr> en una <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>

Answer 1

Agregar cursor: pointer a su css.

Answer 2

Agregué esto a mi style.css para administrar las opciones del cursor:

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

Answer 3

He buscado un poco los estilos de arranque y encontré esto:

[role=button]{cursor:pointer}

Así que supongo que puedes obtener lo que quieres con:

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

Answer 4

La forma más fácil que he encontrado es agregar

style="cursor: pointer;"

a tus etiquetas

Answer 5

Para compatibilidad con IE <6 use este estilo en ese orden:

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

Pero recuerde que IE <7 admite :hover pseudoclass solo con elemento <a> .

Answer 6

Usando CSS

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

Answer 7

Use el cursor: pointer; estilo cursor: pointer; en CSS para el elemento sobre el que desea que cambie el cursor.

En tu caso, usarías (en tu archivo .css):

.sortable {
cursor: pointer;
}

Answer 8

Usted podría hacer esto sin javascript en realidad.

.sortable tr {
cursor: pointer;
}

Answer 9

Utilice la propiedad de cursor CSS como así:

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

Por supuesto, debe poner el estilo en su archivo CSS y aplicarlo a la clase.

Answer 10

por solo un estándar, las soluciones anteriores funcionan, pero si usa tablas de datos, debe anular las configuraciones predeterminadas de datatatables.css y agregar el siguiente código a css personalizado. En el código siguiente, seleccionar fila es la clase que agregué en las tablas de datos. como se muestra en el html.

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

Y tu html se verá como a continuación:

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