Wie ändere ich den Cursor mit jQuery vom Zeiger auf den Finger?

128

Das ist wahrscheinlich sehr einfach, aber ich habe es noch nie gemacht. Wie ändern Sie Ihren Cursor auf den Finger (wie zum Klicken auf Links) anstelle des regulären Zeigers?

Und wie man das mit jQuery macht, da ich es dafür benutze.

javascript jquery css

— Andrew
quelle

247

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

Ich weiß, dass dies gemäß Ihrer ursprünglichen Frage verwirrend sein kann, aber der "Finger" -Cursor wird tatsächlich als "Zeiger" bezeichnet.

Der normale Pfeilcursor ist nur "Standard".

Alle möglichen Standardzeiger sehen DEMO aus

— Peter Bailey
quelle

14

Wenn möglich, tun Sie dies über CSS (z. B. mit einem: Hover-Selektor) und vermeiden Sie JQuery insgesamt.

— The Who

8

@The Who - Sicher, aber wenn das Ändern des Cursors Teil einer Funktionalität ist, die von JS abhängt (sagen wir, Sie haben einen Schieberegler), möchten Sie nicht, dass sich der Cursor ändert, wenn der Benutzer JS deaktiviert hat.

— Peter Ajtai

3

Ich habe dies in Verbindung mit verwendet $('selector').css('cursor', 'auto');, um den Stil zu entfernen, wenn die Maus aus dem Zeigerbereich bewegt wird. CSS-Klassen können sauberer sein ... mit $('...').addClass('someclass')und$('...').removeClass('someclass')

— jocull

Wenn Sie dies auf das Body-Tag anwenden und zu einem benutzerdefinierten Cursor wie diesem wechseln: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );Es scheint nicht zu funktionieren. Ich weiß nicht, ob dies ein Fehler in JQuery oder Chrome ist. Ich habe dies jedoch nicht in anderen Browsern getestet.

— jcfrei

16

Aktualisieren! Neu verbessert! Finde Plugin @ GitHub !

Auf einer anderen Anmerkung, während diese Methode einfach ist, habe ich einen jQuery - Plug erstellt ( in diesem jsFiddle gefunden, nur kopieren und Code zwischen Kommentarzeilen ) , die als auf jedem Element als einfache Änderung die Cursor macht $("element").cursor("pointer").

Aber das ist nicht alles! Handeln Sie jetzt und Sie erhalten die Handfunktionen position& ishoverohne Aufpreis! Richtig, 2 sehr praktische Cursorfunktionen ... KOSTENLOS!

Sie funktionieren so einfach wie in der Demo gezeigt:

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

Ebenfalls:

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

Die Vorräte sind begrenzt, also handeln Sie jetzt!

— SpYk3HH
quelle

7

Wie ändern Sie Ihren Cursor auf den Finger (wie zum Klicken auf Links) anstelle des regulären Zeigers?

Dies ist sehr einfach mit der CSS-Eigenschaft zu erreichen cursor, nicht jQueryerforderlich.

Sie können mehr darüber lesen in: CSS cursor propertyundcursor - CSS | MDN

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

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

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

Erweitern Sie das Snippet

— Romulo
quelle

1

Es ist sehr einfach

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

Probieren Sie es auf JSfiddle aus

— Abk
quelle