alterar o cursor para o ponteiro do dedo

234

Eu tenho isso ae não sei se preciso inserir o "onmouseover" para que o cursor mude para o ponteiro do dedo como um link comum:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

Eu li em algum lugar que eu preciso colocar:

onmouseover="cursor: hand (a pointing hand)"

Mas não está funcionando para mim.

Além disso, não tenho certeza se isso é considerado JavaScript, CSS ou apenas HTML.

Dvir Levy
fonte
é css e o evento onmouseover é um evento javascript.
Scott Scott
Você não coloca css diretamente em onmouseover = "". Além disso, cursor: hand enquanto passa o mouse sobre o seu link deve ser a ação padrão. Se isso não estiver acontecendo, pode haver outro problema em mãos.
Tank
3
lol "Mão ..... uma mão apontando!" haha desculpe, eu não pude resistir.
Christine

Respostas:

458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

É css.

Ou em uma folha de estilos:

a.menu_links { cursor: pointer; }
Scott
fonte
2
Após testar isso, parece necessário ter onmouseover = "" AND style = cursor: ponteiro; ". Se você tiver apenas a tag style, o cursor do ponteiro do ponteiro desaparecerá / o padrão para o ponteiro padrão após a interação de um clique. Bom post Scott, obrigado.
Nubtacular 4/15
1
@ DNFD você só precisa do onmouseoverse não houver href definição. Se, como uma âncora padrão, não é uma hrefdefinição, o onmouseovernão é necessário.
Scott
@DnfD a resposta aceita é meio horrível, realmente. faz o trabalho, mas não está claro. remova mouseover=""e style="cursor: pointer;"deixe class="menu_links" funcionar! independentemente de hrefestar lá ou não.
Jarett Lloyd
@ Scott não, você não precisa do mouseoverevento lá. veja meu comentário anterior para DnfD
Jarett Lloyd
O @JarettLloyd depende muito do suporte ao navegador e da construção de CSS. Esta é uma resposta de 2012 . As coisas mudaram em mais de 6 anos.
Scott Scott
52

Você pode fazer isso em CSS:

a.menu_links {
    cursor: pointer;
}

Este é realmente o comportamento padrão para links. Você deve, de alguma forma, substituí-lo em outro lugar no seu CSS ou não há nenhum hrefatributo nele (está faltando no seu exemplo).

Joseph Silber
fonte
eu não tenho um href porque não quero sair da página. sua ligação a que desencadeia uma função JS e se eu inserir href = "#" ele mexe-lo e ele recarrega a página errada
Dvir Levy
2
@DvirLevy - Então, ou retornar falso e uso href="#", ou simplesmente usar o CSS como eu mostrei-lhe ...
Joseph Silber
22

Eu gosto de usar este se tiver apenas um link na página:

onMouseOver="this.style.cursor='pointer'"
fooschnikens
fonte
8

em css write

a.menu_links:hover{ cursor:pointer}
Mandeep Pasbola
fonte
7

Aqui está algo legal se você quiser ir além com isso. no URL, você pode usar um link ou salvar uma imagem png e usar o caminho. por exemplo:

url ('assets / imgs / theGoods.png');

abaixo está o código:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Portanto, isso funcionará apenas com o tamanho 128 X 128, maior e a imagem não será carregada. Mas você pode usar praticamente qualquer imagem que desejar! Isso seria considerado puro css3 e alguns html. tudo o que você precisa fazer em html é

<div class='cursor'></div>

e somente nessa div, esse cursor será exibido. Então eu costumo adicioná-lo à tag body.

Michael Barreiro
fonte
6

Penso que a "melhor resposta" acima, embora programaticamente precisa, não responde de fato à pergunta. a pergunta pergunta como alterar o ponteiro no evento do mouseover. Eu vejo posts sobre como alguém pode ter um erro em algum lugar e não está respondendo à pergunta. Na resposta aceita, o evento mouseover está em branco ( onmouseover="") e a opção de estilo, em vez disso, está incluída. Desconcertante porque isso foi feito.

Pode não haver nada de errado com o link do solicitante. considere o seguinte html:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Quando um usuário passa o mouse sobre esse link, o ponteiro não muda para uma mão ... em vez disso, o ponteiro se comportará como se estivesse pairando sobre o texto normal. Pode-se não querer isso ... e, portanto, o ponteiro do mouse precisa ser instruído a mudar.

a resposta procurada é a seguinte (postada por outro):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

No entanto, isso é ... um pesadelo, se você tem muitas dessas coisas, ou usa esse tipo de coisa em todo o lugar e decide fazer algum tipo de mudança ou se deparar com um bug. melhor fazer uma classe CSS para isso:

a.lendhand {
  cursor: pointer;
}

então:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

existem muitas outras maneiras que seriam, sem dúvida, melhores que esse método. DIVs , BOTÕES , IMGs , etc. podem ser mais úteis. Não vejo mal em usá-lo <a>...</a>.

Jarett.

Jarett Lloyd
fonte
4

Adicione um hrefatributo para torná-lo um link válido e return false;no manipulador de eventos para impedir que ele cause uma navegação;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Ou faça o displayData()retorno falso e ..="return displayData(..)

Alex K.
fonte
3

A solução via CSS puro, conforme mencionado na resposta marcada como a melhor, não é adequada para essa situação.

O exemplo neste tópico não possui o atributo href estático normal, ele está chamando apenas o JS, portanto, ele não fará nada sem o JS.

Portanto, é bom ativar o ponteiro apenas com JS. Então, solução

onMouseOver="this.style.cursor='pointer'"

como mencionado acima (mas não posso comentar lá) é o melhor neste caso. (Mas sim, geralmente, para links normais que não exigem JS, é melhor trabalhar com CSS puro sem JS.)

Martin Adámek
fonte
-1

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}
<div> im Pointer  cursor </div> 
<p> im Txst cursor </p> 

Omar bakhsh
fonte