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>

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

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>

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.



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

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.


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

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.


4

Usando css

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

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>

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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.