JQuery kullanarak imleci işaretçiden parmağa nasıl değiştirebilirim?

128

Bu muhtemelen gerçekten çok kolay, ama daha önce hiç yapmadım. Normal işaretçi yerine imlecinizi parmağınızla (bağlantılara tıklamak gibi) nasıl değiştirirsiniz?

Bunu jQuery ile nasıl yapacağım, çünkü onu bunun için kullanıyorum.

javascript jquery css

— Andrew
kaynak

247

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

Bunun orijinal sorunuz için kafa karıştırıcı olabileceğini biliyorum, ancak "parmak" imlecine aslında "işaretçi" denir.

Normal ok imleci sadece "varsayılan" dır.

olası tüm varsayılan işaretçi DEMO görünüyor

— Peter Bailey
kaynak

14

Mümkünse, bunu CSS aracılığıyla yapın (örneğin a: hover seçici ile) ve jquery'den tamamen kaçının.

— The Who

8

@ The Who - Elbette, ancak imleci değiştirmek JS'ye bağlı bir işlevin parçasıysa (bir kaydırıcınız olduğunu varsayalım), kullanıcı JS'yi kapatmışsa imlecin değişmesini istemezsiniz.

— Peter Ajtai

3

Bunu $('selector').css('cursor', 'auto');, fareyi işaretçi alanından çıkarırken stili çıkarmak için kullandım. CSS sınıfları daha temiz olabilir ... $('...').addClass('someclass')ve ile$('...').removeClass('someclass')

— jocull

bunu gövde etiketine uygularken ve $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );bunun gibi özel bir imleci değiştirirken: işe yaramıyor gibi görünüyor. Bunun jquery veya chrome içinde bir hata olup olmadığını bilmiyorum. bunu diğer tarayıcılarda test etmedi.

— jcfrei

17

Güncelleme! Yeni geliştirilmiş! Eklenti @ GitHub bulun !

Başka bir notta, bu yöntem basit olsa da, imlecin herhangi bir öğede değiştirilmesini bu kadar basit hale getiren bir jQuery eklentisi oluşturdum ( bu jsFiddle'da bulunan kodu yorum satırları arasında kopyalayıp yapıştırın ) $("element").cursor("pointer").

Ama hepsi bu değil! Şimdi Yasası ve el fonksiyonlarını alırsınız position& ishoverekstra bir ücret ödemeden! Doğru, 2 çok kullanışlı imleç işlevi ... ÜCRETSİZ!

Demoda görüldüğü kadar basit çalışıyorlar:

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

Ayrıca:

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

Malzemeler sınırlıdır, bu yüzden Hemen Harekete Geçin!

— SpYk3HH
kaynak

7

Normal işaretçi yerine imlecinizi parmağınızla (bağlantılara tıklamak gibi) nasıl değiştirirsiniz?

CSS özelliğini kullanarak bunu gerçekleştirmek çok basittir cursor, gerek yoktur jQuery.

Hakkında daha fazla bilgi edinebilirsiniz: CSS cursor propertyvecursor - CSS | MDN

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

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

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

Snippet'i genişlet

— Romulo
kaynak

1

Çok yalındır

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

JSfiddle'da kontrol edin

— Abk
kaynak