Mude o cursor para a mão quando o mouse passar por uma linha na tabela

201

Como altero o ponteiro do cursor para a mão quando o mouse passa por <tr>um<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
fonte
Para um trecho de código interativo, verifique minha resposta
fmagno 15/01

Respostas:

350

Você pode fazer isso com CSS, na verdade.

.sortable tr {
    cursor: pointer;
}
dangerChihuahua007
fonte
21
Isso funcionará perfeitamente bem sem o :hover. cursordefine o que o cursor muda quando o mouse está sobre ele.
James Montagne
3
Alguma chance de você modificar esta resposta para remover os desnecessários :hover? A pergunta ainda chama a atenção 2 anos depois e seria bom se a resposta aceita não sugerisse o uso :hoverdesnecessário. Eu acho que isso leva a um mal-entendido de como cursorfunciona e implica que :hoveré necessário mudar o cursor.
James Montagne
203

Pesquisei um pouco os estilos de inicialização e encontrei o seguinte:

[role=button]{cursor:pointer}

Então, suponho que você pode obter o que deseja com:

<span role="button">hi</span>
Ivan
fonte
Foi bom para os aficcionados por bootstrap, mas a pergunta não envolve nenhuma estrutura frontal, então não entendo por que essa resposta é relevante para a pergunta (mesmo que a resposta seja ótima) #
22136 Greco Jonathan
@Hooli a partir de 6-2018, esta publicação agora é o resultado principal ao pesquisar "ícone de mudança de auto-inicialização para ponteiro ao passar o mouse".
precisa saber é o seguinte
1
@ OlivierBoissé Acabei de testar e, definitivamente, funciona com BS 4
Gabe Hiemstra
1
Importante: Não adicione role="button"quando quiser adicionar style="cursor:pointer;". Primeiro, o seu elemento depende de o CSS ser definido em outro lugar (e não ser substituído em outro lugar) e, o mais importante, você está utilizando incorretamente o roleatributo , simplesmente porque a maioria dos usuários não precisa dele. Observe que a maioria dos leitores de tela permite iterar pelos [role=button]elementos, dando aos usuários desafiados pela acessibilidade da Web a capacidade de passar rapidamente por todos os botões da página. Não faça com que eles tenham que percorrer cada uma das linhas da tabela para acessar os links do rodapé!
tao
75

A maneira mais fácil que encontrei é adicionar

style="cursor: pointer;"

para suas tags.

Ira Herman
fonte
23

Adicione cursor: pointerao seu css.

James Montagne
fonte
17

Adicionei isso ao meu style.css para gerenciar as opções do cursor:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
xackobo
fonte
1
não é bom se você introduzir erros de digitação ao longo do caminho (consulte "croshair")
observador
12

Para compatibilidade com o IE <6, use este estilo nessa ordem:

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

Mas lembre-se de que o IE <7 suporta :hoverpseudoclasse apenas com o <a>elemento.

UbiQue
fonte
10

Use o estilo cursor: pointer; no CSS para o elemento que você deseja que o cursor altere.

No seu caso, você usaria (no seu arquivo .css):

.sortable {
    cursor: pointer;
}
Chetan
fonte
9

Use a propriedade do cursor CSS da seguinte maneira:

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

Claro que você deve colocar o estilo no seu arquivo CSS e aplicá-lo à classe.

EverPresent
fonte
4

Usando css 

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

para apenas um padrão, as soluções acima funcionam, mas se você estiver usando tabelas de dados, deverá substituir as configurações padrão datatatables.css e adicionar o seguinte código ao CSS personalizado. No código abaixo, selecione a linha é a classe que eu adicionei nas tabelas de dados como mostrado no html.

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

E você html ficará como abaixo:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
Renu
fonte
Qual solução acima?
Kmeixner
2

Exemplo com estilos embutidos:

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

fmagno
fonte