Cambie el cursor a la mano cuando el mouse pase sobre una fila en la tabla

201

¿Cómo cambio el puntero del cursor a mano cuando mi mouse pasa sobre <tr>un<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 css cursor Zeeshan Rang
fuente
Para un fragmento de código interactivo, verifique mi respuesta
fmagno

Respuestas:

350

Puedes hacer esto con CSS en realidad.

.sortable tr {
    cursor: pointer;
}
peligroChihuahua007
fuente
21
Esto funcionará perfectamente bien sin el :hover. cursordefine a qué cambia el cursor cuando el mouse está sobre él.
James Montagne
3
¿Hay alguna posibilidad de que pueda modificar esta respuesta para eliminar lo innecesario :hover? La pregunta aún recibe atención 2 años después y sería bueno si la respuesta aceptada no sugiriera usarla :hoverinnecesariamente. Creo que conduce a un malentendido de cómo cursorfunciona e implica que :hoverse necesita para cambiar el cursor.
James Montagne
203

He buscado un poco los estilos de arranque y he encontrado esto:

[role=button]{cursor:pointer}

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

<span role="button">hi</span>
Ivan
fuente
Fue agradable para los aficionados al bootstrap, pero la pregunta no involucra ningún marco frontal, por lo que no entiendo por qué esta respuesta es relevante con la pregunta (incluso si la respuesta es excelente)
Greco Jonathan
@Hooli a partir del 6-2018, esta publicación es ahora el mejor resultado cuando se busca "icono de cambio de arranque para puntero al pasar el mouse".
BrianHVB
1
@ OlivierBoissé Acabo de probar y definitivamente funciona con BS 4
Gabe Hiemstra
1
Importante: No agregue role="button"cuando quiera agregar style="cursor:pointer;". En primer lugar, su elemento depende de que ese CSS se defina en otro lugar (y no se anule en otro lugar) y, lo más importante, está haciendo un mal uso del roleatributo , simplemente porque la mayoría de los usuarios no lo necesitan. Tenga en cuenta que la mayoría de los lectores de pantalla permiten iterar a través de [role=button]elementos que brindan a los usuarios con accesibilidad web la capacidad de acceder rápidamente a todos los botones de página. ¡No haga que tengan que pasar por cada una de las filas de la tabla para llegar a los enlaces de pie de página!
tao
75

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

style="cursor: pointer;"

a tus etiquetas.

Ira Herman
fuente
23

Añadir cursor: pointera su CSS.

James Montagne
fuente
17

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;}
xackobo
fuente
1
no es bueno si introduce errores tipográficos en el camino (ver "croshair")
observador
12

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

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

Pero recuerde que IE <7 :hoversolo admite pseudoclases con <a>element.

UbiQue
fuente
10

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

En su caso, usaría (en su archivo .css):

.sortable {
    cursor: pointer;
}
Chetan
fuente
9

Use la propiedad del cursor CSS de esta manera:

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

Siempre presente
fuente
4

Usando CSS 

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

solo para un estándar, las soluciones anteriores funcionan, pero si está usando tablas de datos, debe anular la configuración predeterminada de datatatables.css y agregar el siguiente código a css personalizado. En el código a continuación, select-row 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á a continuación:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
Renu
fuente
¿Qué solución anterior?
Kmeixner
2

Ejemplo con estilos en línea:

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

fmagno
fuente