Comment changer le curseur du pointeur au doigt en utilisant jQuery?

128

C'est probablement très facile, mais je ne l'ai jamais fait auparavant. Comment changer votre curseur en doigt (comme pour cliquer sur des liens) au lieu du pointeur normal?

Et comment faire cela avec jQuery puisque c'est pour cela que je l'utilise.

javascript jquery css

— Andrew
source

247

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

Je sais que cela peut être déroutant par rapport à votre question initiale, mais le curseur «doigt» est en fait appelé «pointeur».

Le curseur fléché normal est simplement "par défaut".

tous les pointeurs par défaut possibles ressemblent à DEMO

— Peter Bailey
source

14

Si possible, faites-le via CSS (par exemple avec un sélecteur: hover) et évitez complètement jquery.

— The Who

8

@The Who - Bien sûr, mais si la modification du curseur fait partie d'une fonctionnalité qui dépend de JS (disons que vous avez un curseur), vous ne voudriez pas que le curseur change si l'utilisateur a désactivé JS.

— Peter Ajtai

3

Je l'ai utilisé en conjonction avec $('selector').css('cursor', 'auto');pour supprimer le style lors du déplacement de la souris hors de la zone du pointeur. Les classes CSS peuvent être plus propres ... avec $('...').addClass('someclass')et$('...').removeClass('someclass')

— jocull

lorsque vous appliquez cela à la balise body et que vous passez à un curseur personnalisé comme celui- $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );ci : cela ne semble pas fonctionner. Je ne sais pas s'il s'agit d'un bogue dans jquery ou chrome. Je n'ai pas testé cela sur d'autres navigateurs.

— jcfrei

16

Mettre à jour! Nouveau et amélioré! Trouvez le plugin @ GitHub !

Sur une autre note, bien que cette méthode soit simple, j'ai créé un plug jQuery ( trouvé dans ce jsFiddle, il suffit de copier et de coller le code entre les lignes de commentaire ) qui rend le changement de curseur sur n'importe quel élément aussi simple que $("element").cursor("pointer").

Mais ce n'est pas tout! Agissez maintenant et vous obtiendrez les fonctions manuelles positionet ishoversans frais supplémentaires! C'est vrai, 2 fonctions de curseur très pratiques ... GRATUIT!

Ils fonctionnent aussi simplement que dans la démo:

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

Aussi:

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

Les fournitures sont limitées, alors agissez maintenant!

— SpYk3HH
source

7

Comment changer votre curseur en doigt (comme pour cliquer sur des liens) au lieu du pointeur normal?

Ceci est très simple à réaliser en utilisant la propriété CSS cursor, pas jQuerynécessaire.

Vous pouvez en savoir plus sur: CSS cursor propertyetcursor - CSS | MDN

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

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

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

Développer l'extrait

— Romulo
source

1

C'est très simple

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

Découvrez-le sur JSfiddle

— Abk
source