Como mudar o cursor de ponteiro para dedo usando jQuery?

128

Provavelmente é realmente fácil, mas nunca fiz isso antes. Como você muda o cursor para o dedo (como clicar nos links) em vez do ponteiro comum?

E como fazer isso com o jQuery, já que é para isso que estou usando.

javascript jquery css

— Andrew
fonte

247

$('selector').css('cursor', 'pointer'); // 'default' to revert

Sei que isso pode ser confuso para sua pergunta original, mas o cursor "dedo" é na verdade chamado de "ponteiro".

O cursor de seta normal é apenas "padrão".

todo o ponteiro padrão possível parece DEMO

— Peter Bailey
fonte

14

Se possível, faça isso via CSS (digamos, com um seletor: hover) e evite o jquery completamente.

— The Who

8

@ The Who - Claro, mas se a alteração do cursor fizer parte de uma funcionalidade que depende do JS (digamos que você tenha um controle deslizante), não deseja que o cursor mude se o usuário tiver o JS desativado.

— Peter Ajtai

3

Eu usei isso em conjunto com $('selector').css('cursor', 'auto');para retirar o estilo ao mover o mouse para fora da área do ponteiro. Classes CSS podem ser mais limpas ... com $('...').addClass('someclass')e$('...').removeClass('someclass')

— jocull

ao aplicar isso à tag body e mudar para um cursor personalizado como este: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );ele parece não funcionar. Não sei se isso é um bug no jquery ou no chrome. Ainda não testei isso em outros navegadores.

— Jcfrei

16

Atualizar! Novo e melhorado! Encontre o plugin @ GitHub !

Em outra nota, embora esse método seja simples, eu criei um plug-in jQuery ( encontrado neste jsFiddle, apenas copie e passe o código entre as linhas de comentário ) que facilita a mudança do cursor em qualquer elemento $("element").cursor("pointer").

Mas isso não é tudo! Aja agora e você terá as funções das mãos positione ishoversem nenhum custo extra! É isso mesmo, 2 funções muito úteis do cursor ... GRÁTIS!

Eles funcionam da maneira mais simples, como visto na demonstração:

$("h3").cursor("isHover"); // if hovering over an h3 element, will return true, 
    // else false
// also handy as
$("h2, h3").cursor("isHover"); // unless your h3 is inside an h2, this will be 
    // false as it checks to see if cursor is hovered over both elements, not just the last!
//  And to make this deal even sweeter - use the following to get a jQuery object
//       of ALL elements the cursor is currently hovered over on demand!
$.cursor("isHover");

Além disso:

$.cursor("position"); // will return the current cursor position as { x: i, y: i }
    // at anytime you call it!

Os suprimentos são limitados, então aja agora!

— SpYk3HH
fonte

7

Como você muda o cursor para o dedo (como clicar nos links) em vez do ponteiro comum?

Isso é muito simples de obter usando a propriedade CSS cursor, não é jQuerynecessário.

Você pode ler mais sobre: CSS cursor propertyecursor - CSS | MDN

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}

<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>

Expandir snippet

— Romulo
fonte

1

É muito direto

HTML

<input type="text" placeholder="some text" />
<input type="button" value="button" class="button"/>
<button class="button">Another button</button>

jQuery

$(document).ready(function(){
  $('.button').css( 'cursor', 'pointer' );

  // for old IE browsers
  $('.button').css( 'cursor', 'hand' ); 
});

Confira no JSfiddle

— Abk
fonte