Jak zmienić kursor ze wskaźnika na palec za pomocą jQuery?

130

Prawdopodobnie jest to naprawdę łatwe, ale nigdy wcześniej tego nie robiłem. Jak zmienić kursor na palec (jak w przypadku klikania linków) zamiast zwykłego wskaźnika?

I jak to zrobić z jQuery, skoro do tego go używam.

javascript jquery css

— Andrzej
źródło

253

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

Wiem, że może to być mylące, biorąc pod uwagę Twoje pierwotne pytanie, ale kursor „palcem” jest w rzeczywistości nazywany „wskaźnikiem”.

Normalny kursor strzałki jest po prostu „domyślny”.

wszystkie możliwe domyślne wskaźniki wyglądają DEMO

— Peter Bailey
źródło

14

Jeśli to możliwe, zrób to przez CSS (powiedz z selektorem: hover) i całkowicie unikaj jquery.

— The Who,

8

@The Who - Jasne, ale jeśli zmiana kursora jest częścią funkcjonalności zależnej od JS (powiedzmy, że masz suwak), nie chciałbyś, aby kursor się zmieniał, jeśli użytkownik wyłączył JS.

— Peter Ajtai

4

Użyłem tego w połączeniu z, $('selector').css('cursor', 'auto');aby usunąć styl podczas przenoszenia myszy poza obszar wskaźnika. Klasy CSS mogą być czystsze ... z $('...').addClass('someclass')i$('...').removeClass('someclass')

— żartobliwie

podczas stosowania tego do tagu body i zmiany na niestandardowy kursor w ten sposób: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );wydaje się, że nie działa. Nie wiem, czy jest to błąd w jquery czy chrome. nie testowałem tego jednak na innych przeglądarkach.

— jcfrei

17

Aktualizacja! Nowe i ulepszone! Znajdź wtyczkę @ GitHub !

Z drugiej strony, chociaż ta metoda jest prosta, stworzyłem wtyczkę jQuery ( znalezioną w tym jsFiddle, po prostu skopiuj i wklej kod między wierszami komentarza ), która sprawia, że zmiana kursora na dowolnym elemencie jest tak prosta jak $("element").cursor("pointer").

Ale to nie wszystko! Działaj teraz, a otrzymasz funkcje rąk positioni to ishoverbez dodatkowych opłat! Zgadza się, 2 bardzo przydatne funkcje kursora ... ZA DARMO!

Działają tak prosto, jak widać na demonstracji:

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

Również:

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

Zapasy są ograniczone, więc działaj teraz!

— SpYk3HH
źródło

7

Jak zmienić kursor na palec (jak w przypadku klikania linków) zamiast zwykłego wskaźnika?

Jest to bardzo proste do osiągnięcia za pomocą właściwości CSS cursor, bez jQuerypotrzeby.

Więcej na ten temat można przeczytać w: CSS cursor propertyicursor - CSS | MDN

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

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

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

Rozwiń fragment

— Romulo
źródło

1

To jest bardzo proste

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

Sprawdź to na JSfiddle

— Abk
źródło