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

Lesezeit: 3 Minuten

Benutzer-Avatar
Andreas

Das ist wahrscheinlich wirklich einfach, aber ich habe es noch nie gemacht. Wie ändern Sie Ihren Cursor in den Finger (wie beim Klicken auf Links) anstelle des normalen Zeigers?

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

Benutzer-Avatar
Peter Bailey

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

Ich weiß, dass das für Ihre ursprüngliche Frage verwirrend sein kann, aber der “Finger” -Cursor heißt eigentlich “Zeiger”.

Der normale Pfeil-Cursor ist nur “Standard”.

alle möglichen Standard-Zeiger-Looks DEMO

  • Wenn möglich, tun Sie dies über CSS (z. B. mit einem :hover-Selektor) und vermeiden Sie jquery ganz.

    – Die WHO

    3. Dezember 2009 um 23:06 Uhr

  • @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

    8. Juli 2011 um 18:46 Uhr

  • 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')

    – jokul

    14. November 2011 um 4:07 Uhr


  • wenn Sie dies auf das Body-Tag anwenden und wie folgt zu einem benutzerdefinierten Cursor 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. habe dies jedoch nicht mit anderen Browsern getestet.

    – jcfrei

    20. Juli 2012 um 14:36 ​​Uhr


Benutzer-Avatar
SpYk3HH

Aktualisieren! Neue verbesserte! Plugin finden @ GitHub!


Eine andere Anmerkung: Obwohl diese Methode einfach ist, habe ich ein jQuery-Plug-in erstellt (finden Sie in diesem jsFiddle, kopieren Sie einfach den Code und fügen Sie ihn zwischen den Kommentarzeilen ein), die das Ändern des Cursors auf einem beliebigen Element so einfach macht wie $("element").cursor("pointer").

Aber das ist nicht alles! Handeln Sie jetzt und Sie erhalten die Handfunktionen position & ishover ohne Aufpreis! Das ist richtig, 2 sehr praktische Cursorfunktionen … KOSTENLOS!

Sie funktionieren so einfach wie in der Demo zu sehen:

$("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!

Wie ändern Sie Ihren Cursor in den Finger (wie beim Klicken auf Links) anstelle des normalen Zeigers?

Dies ist sehr einfach mit der CSS-Eigenschaft zu erreichen cursornein jQuery erforderlich.

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

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

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

Benutzer-Avatar
Abk

Es ist sehr geradlinig

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

1257380cookie-checkWie ändere ich den Cursor mit jQuery vom Zeiger zum Finger?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy