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>