Come cambiare cursore da puntatore a dito usando jQuery?

128

Questo è probabilmente molto semplice, ma non l'ho mai fatto prima. Come si modifica il cursore sul dito (come per fare clic sui collegamenti) anziché sul normale puntatore?

E come farlo con jQuery poiché è per questo che lo sto usando.

javascript jquery css

— Andrea
fonte

247

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

So che può essere fonte di confusione per la tua domanda originale, ma il cursore "dito" è in realtà chiamato "puntatore".

Il normale cursore a freccia è solo "predefinito".

tutti i possibili puntatori predefiniti sembrano DEMO

— Peter Bailey
fonte

14

Se possibile, farlo tramite CSS (diciamo con un: selettore hover) ed evitare del tutto jquery.

— The Who

8

@The Who - Certo, ma se cambiare il cursore fa parte di una funzionalità che dipende da JS (diciamo che hai un cursore), allora non vorrai che il cursore cambi se l'utente ha JS disattivato.

— Peter Ajtai,

3

L'ho usato insieme a $('selector').css('cursor', 'auto');per eliminare lo stile quando si sposta il mouse fuori dall'area del puntatore. Le classi CSS possono essere più pulite ... con $('...').addClass('someclass')e$('...').removeClass('someclass')

— giochiamo il

quando si applica questo al tag body e si passa a un cursore personalizzato come questo: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );non sembra funzionare. Non so se si tratta di un bug all'interno di jquery o chrome. non ho provato questo su altri browser però.

— jcfrei,

16

Aggiornare! Nuovo e migliorato! Trova plugin @ GitHub !

In un'altra nota, mentre quel metodo è semplice, ho creato un plug jQuery (che si trova in questo jsFiddle, basta copiare e incollare il codice tra le righe di commento ) che rende semplice cambiare il cursore su qualsiasi elemento $("element").cursor("pointer").

Ma non è tutto! Agisci ora e otterrai le funzioni della mano positioneishover senza costi aggiuntivi! Esatto, 2 funzioni del cursore molto utili ... GRATIS!

Funzionano in modo semplice come visto nella demo:

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

Anche:

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

I materiali di consumo sono limitati, quindi agisci ora!

— SpYk3HH
fonte

7

Come si modifica il cursore sul dito (come per fare clic sui collegamenti) anziché sul normale puntatore?

Questo è molto semplice da ottenere utilizzando la proprietà CSS cursor, non è jQuerynecessario.

Puoi leggere di più in: CSS cursor propertyecursor - CSS | MDN

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

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

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

Espandi frammento

— Romulo
fonte

1

È molto semplice

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

Dai un'occhiata su JSfiddle

— abk
fonte