web-dev-qa-db-fra.com

Comment changer le curseur de pointeur en doigt avec jQuery?

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

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

javascriptjquerycss
119
Andrew
$('selector').css( 'cursor', 'pointer' );

Je sais que cela peut semer la confusion selon votre question initiale, mais le curseur "doigt" est en réalité appelé "pointeur".

Le curseur de flèche normal est juste "par défaut".

tout le pointeur par défaut possible ressemble DÉMO

232
Peter Bailey

Mise à jour! Nouveau et amélioré! Trouver le plugin @ GitHub !

Sur une autre note, while cette méthode est simple, j'ai créé un plug jQuery ( trouvé sur ce jsFiddle, il suffit de copier et coller le code entre les commentaires lignes ) qui permet de changer le curseur sur un élément aussi simple que $("element").cursor("pointer").

Mais ce n'est pas tout! Agissez maintenant et vous obtiendrez les fonctions des mains position & ishover sans 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!

16
SpYk3HH

Comment changez-vous votre curseur au doigt (comme pour cliquer sur des liens) au lieu du pointeur habituel?

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

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

_.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}_
_<a class="default" href="#">default</a>

<a class="pointer" href="#">pointer</a>_
6
Romulo

C'est très simple

HTML

<div>
<input type="text" placeholder="sometext" />

<input type="button" value="button" class="button"/>
<br/><br/>
<button class="button"> Another button</button>
</div>

Jquery

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

// for old IE browsers

$('.button').css( 'cursor', 'hand' ); 

});

jetez un oeil sur JSfiddle

1
Abk