¿Cómo cambiar el cursor de puntero a dedo usando jQuery?

128

Probablemente esto sea realmente fácil, pero nunca lo he hecho antes. ¿Cómo se cambia el cursor al dedo (como hacer clic en los enlaces) en lugar del puntero normal?

Y cómo hacer esto con jQuery ya que para eso lo estoy usando.

javascript jquery css

— Andrés
fuente

247

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

Sé que puede ser confuso según su pregunta original, pero el cursor "dedo" en realidad se llama "puntero".

El cursor de flecha normal es simplemente "predeterminado".

todo el puntero predeterminado posible se ve DEMO

— Peter Bailey
fuente

14

Si es posible, haga esto a través de CSS (digamos con un: selector de desplazamiento) y evite jquery por completo.

— The Who

8

@The Who - Claro, pero si cambiar el cursor es parte de una funcionalidad que depende de JS (digamos que tiene un control deslizante), entonces no querrá que el cursor cambie si el usuario tiene JS desactivado.

— Peter Ajtai

3

Utilicé esto junto con $('selector').css('cursor', 'auto');para quitar el estilo al mover el mouse fuera del área del puntero. Las clases de CSS pueden ser más limpias ... con $('...').addClass('someclass')y$('...').removeClass('someclass')

— jocull

al aplicar esto a la etiqueta del cuerpo y cambiar a un cursor personalizado como este: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );no parece funcionar. No sé si esto es un error dentro de jquery o chrome. Sin embargo, no he probado esto en otros navegadores.

— jcfrei

16

¡Actualizar! ¡Mejorada! Encuentra plugin @ GitHub !

En otra nota, aunque ese método es simple, he creado un complemento jQuery (que se encuentra en este jsFiddle, solo copie y pegue el código entre líneas de comentarios ) que hace que cambiar el cursor en cualquier elemento sea tan simple como $("element").cursor("pointer").

¡Pero eso no es todo! ¡Actúe ahora y obtendrá las funciones de la mano positiony ishoversin cargo adicional! Así es, 2 funciones de cursor muy prácticas ... ¡GRATIS!

Funcionan tan simple como se ve en la demostración:

$("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");

También:

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

Los suministros son limitados, ¡así que actúa ahora!

— SpYk3HH
fuente

7

¿Cómo se cambia el cursor al dedo (como hacer clic en los enlaces) en lugar del puntero normal?

Esto es muy simple de lograr usando la propiedad CSS cursor, no es jQuerynecesario.

Puede leer más sobre en: CSS cursor propertyycursor - CSS | MDN

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

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

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

Expandir fragmento

— Rómulo
fuente

1

Es muy sencillo

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

Compruébalo en JSfiddle

— Abk
fuente