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

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