Bagaimana cara mengubah kursor dari pointer ke jari menggunakan jQuery?

128

Ini mungkin sangat mudah, tetapi saya belum pernah melakukannya sebelumnya. Bagaimana Anda mengubah kursor ke jari (seperti untuk mengklik tautan) alih-alih dari pointer biasa?

Dan bagaimana melakukan ini dengan jQuery karena untuk itulah saya menggunakannya.

javascript jquery css

— Andrew
sumber

247

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

Saya tahu itu mungkin membingungkan per pertanyaan awal Anda, tetapi kursor "jari" sebenarnya disebut "pointer".

Kursor panah normal hanya "default".

semua penunjuk default yang mungkin terlihat DEMO

— Peter Bailey
sumber

14

Jika memungkinkan, lakukan ini melalui CSS (katakan dengan pemilih hover): dan hindari sama sekali jquery.

— The Who

8

@The Who - Sure, tetapi jika mengubah kursor adalah bagian dari fungsionalitas yang bergantung pada JS (misalkan Anda memiliki slider), maka Anda tidak ingin kursor berubah jika pengguna dimatikan JS.

— Peter Ajtai

3

Saya menggunakan ini bersamaan dengan $('selector').css('cursor', 'auto');untuk menghapus gaya ketika menggerakkan mouse keluar dari area pointer. Kelas CSS mungkin lebih bersih ... dengan $('...').addClass('someclass')dan$('...').removeClass('someclass')

— jocull

saat menerapkan ini ke tag tubuh dan mengubah ke kursor khusus seperti ini: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );sepertinya tidak berfungsi. Saya tidak tahu apakah ini bug di jquery atau chrome. havent menguji ini di browser lain.

— jcfrei

16

Memperbarui! Baru & ditingkatkan! Temukan plugin @ GitHub !

Pada catatan lain, sementara metode itu sederhana, saya telah membuat plug jQuery ( ditemukan di jsFiddle ini, cukup salin dan lewati kode di antara baris komentar ) yang membuat mengubah kursor pada elemen apa pun sesederhana $("element").cursor("pointer").

Tapi itu belum semuanya! Bertindak sekarang dan Anda akan mendapatkan fungsi tangan position& ishovertanpa biaya tambahan! Itu benar, 2 fungsi kursor yang sangat berguna ... GRATIS!

Mereka bekerja sesederhana yang terlihat di demo:

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

Juga:

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

Persediaan terbatas, jadi Bertindaklah Sekarang!

— SpYk3HH
sumber

7

Bagaimana Anda mengubah kursor ke jari (seperti untuk mengklik tautan) alih-alih dari pointer biasa?

Ini sangat sederhana untuk dicapai menggunakan properti CSS cursor, tidak jQuerydiperlukan.

Anda dapat membaca lebih lanjut tentang di: CSS cursor propertydancursor - CSS | MDN

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

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

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

Luaskan cuplikan

— Romulo
sumber

1

Sangat lurus ke depan

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

Lihat di JSfiddle

— Abk
sumber