tipo sobre punteros pasar para mano manita icono forma estilo codigo cambiar boton html css cursor

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



manita en css (10)

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


Agregar cursor: pointer a su css.


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


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>


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

style="cursor: pointer;"

a tus etiquetas


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


Usando CSS

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


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


Usted podría hacer esto sin javascript en realidad.

.sortable tr { cursor: pointer; }


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.


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>