javascript - jQuery kullanarak imleci işaretten parmağa nasıl değiştirebilirim?

Bu muhtemelen gerçekten kolay, ama daha önce hiç yapmadım. İmlecinizi normal işaretçi yerine parmak (linklere tıklamak gibi) olarak nasıl değiştirirsiniz?

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

Cevap #1

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

Orijinal sorunuza göre bu kafa karıştırıcı olabilir biliyorum, ama "parmak" imleci aslında "işaretçi" olarak adlandırılıyor.

Normal ok imleci sadece "varsayılan".

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

Cevap #2

Güncelleme! Yeni ve geliştirilmiş! Eklentiyi GitHub'da bulun!

Başka bir konuda, o yöntem basit olmasına rağmen, bir jQuery eklentisi oluşturdum (bu jsFiddle'da bulunuyor, sadece yorum satırları arasındaki kodu kopyalayıp yapıştırın) ve bu eklenti, herhangi bir öğedeki imleci $ ("element").cursor("pointer") kadar basit bir şekilde değiştirmeyi sağlıyor.

Ama hepsi bu değil! Hemen harekete geçin ve ekstra ücret ödemeden el fonksiyonları position ve ishover'u yakalayın! Doğru, 2 çok kullanışlı imleç fonksiyonu ... ÜCRETSİZ!

Demo'da görüldüğü kadar basit çalışırlar:

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

Cevap #3

İmleci normal işaretçi yerine parmak şeklinde (linklere tıklamak için olduğu gibi) nasıl değiştirebilirsiniz?

Bu, cursor CSS özelliğini kullanarak başarmak çok basittir, jQuery gerekmez.

Hakkında daha fazla bilgi okuyabilirsiniz: CSS cursor özelliği ve cursor - CSS | MDN

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

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

İlgili makaleler