como definir o estilo do cursor como ponteiro para links sem hrefs

135

Eu tenho muitas <a>tags html sem o hrefatributo para fazer onclickchamadas javascript. Esses links não têm um estilo de cursor para ponteiro. Eles têm cursor de estilo de texto.

Como posso definir o estilo do cursor como ponteiro para links sem usar o hrefatributo?

Eu sei que posso adicionar href = "#". Eu tenho isso em muitos lugares no documento html e gostaria de saber como fazer um ponteiro no estilo do cursor para links sem usar o hrefatributo

— Kevin
fonte

Adeus, quando você diz o link, você quer dizer "<a id="do_some_javascript"> test </a>"? Ou é apenas uma tag span ou div que faz algum javascript?

— Alxandr

211

no seu arquivo css adicione isso ....

a:hover {
 cursor:pointer;
}

se você não possui um arquivo css, adicione-o ao HEAD da sua página HTML

<style type="text/css">
 a:hover {
  cursor:pointer;
 }
</style>

você também pode usar o atributo href = "" retornando false no final do seu javascript.

<a href="" onclick="doSomething(); return false;">a link</a>

isso é bom por vários motivos. SEO ou se as pessoas não tiverem javascript, o href = "" funcionará. por exemplo

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@see http://www.alistapart.com/articles/behavioralseparation

Edit: Vale notar a resposta de @ BalusC, onde ele menciona, :hovernão é necessário para o caso de uso do OP. Embora outro estilo possa ser adicionado com o :hoverseletor.

— Ross
fonte

5

Usar: hover não é necessário e não é garantido que funcione em links sem um href.

— Alxandr

Não consigo imaginar onde não funcionaria. Essa é uma boa maneira de aprender; convém ter outros comportamentos de adição semelhantes aos links com um atributo href: uma mudança de plano de fundo, sublinhado, cor etc.

— Ross

1

Tem sido um tempo desde que eu usei isso, mas para <IE6 pode valer a pena adicionar um comentário condicional para link para estilos apresentandocursor: hand;

— David diz Reintegrar Monica

Você não precisa de comentários condicionais - basta fazer. O IE6 também entenderá o ponteiro - a mão é para ie5 e abaixo.

— easwee

Usar um a em si pode causar alguns problemas. Especialmente no IE porque eles acionam o OnBeforeUnload, mesmo que você adicione return false; Até um link para javascript: void (0); faz com que OnBeforeUnload seja chamado. Eu tinha uma grande dor de cabeça com este problema no trabalho ...

— Alxandr

16

Basta adicionar isso ao seu estilo CSS global:

a { cursor: pointer; }

Dessa forma, você não depende mais do estilo de cursor padrão do navegador.

— BalusC
fonte

Não funciona O cursor é alterado para em textvez de pointerno Chrome.

— ZhekaKozlov

8

style = "cursor: ponteiro;"

— mxmissile
fonte

6

É assim que muda o cursor de uma seta para uma mão quando você passa o mouse sobre um dado object(myObject).

myObject.style.cursor = 'pointer';

— Lou
fonte

1

Primeiro, bem-vindo ao SO, Lou! Ao postar / responder, certifique-se de ser o mais informativo possível e não esqueça de formatar seus exemplos de código (como eu fiz para você).

— 27713 Brian

4

Dê a todos uma classe comum (por exemplo, link). Em seguida, adicione o arquivo css:

.link { cursor: pointer; }

Ou como o @mxmissile sugeriu, faça-o alinhado com style = "cursor: ponteiro;"

— Alxandr
fonte

4

crie uma classe com o seguinte CSS e adicione-o às suas tags com eventos onclick:

cursor:pointer;

— Dan
fonte

3

Use CSS cursor: pointerse bem me lembro.

No seu arquivo CSS:

.link_cursor
{
    cursor: pointer;
}

Em seguida, basta adicionar o seguinte HTML a qualquer elemento que você deseja que tenha o cursor do link: class="link_cursor"(o método preferido.)

Ou use CSS embutido:

<a style="cursor: pointer;">

— Andy Shellam
fonte

1

Versão angular:

<a (click)="action(); $event.preventDefault()" href="#">Action</a>

— chachan
fonte

0

Isso funcionou para mim:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>

— BabaRick
fonte