Làm cách nào để thay đổi con trỏ từ con trỏ sang ngón tay bằng jQuery?

128

Điều này có lẽ thực sự dễ dàng, nhưng tôi chưa bao giờ làm điều đó trước đây. Làm thế nào để bạn thay đổi con trỏ của bạn thành ngón tay (như nhấp vào liên kết) thay vì con trỏ thông thường?

Và làm thế nào để làm điều này với jQuery vì đó là những gì tôi đang sử dụng.

javascript jquery css

— Andrew
nguồn

247

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

Tôi biết điều đó có thể gây nhầm lẫn cho câu hỏi ban đầu của bạn, nhưng con trỏ "ngón tay" thực sự được gọi là "con trỏ".

Con trỏ mũi tên bình thường chỉ là "mặc định".

tất cả các con trỏ mặc định có thể trông DEMO

— Peter Bailey
nguồn

14

Nếu có thể, hãy thực hiện việc này thông qua CSS (nói với bộ chọn: hover) và tránh hoàn toàn jquery.

— Ai

8

@ The Who - Chắc chắn, nhưng nếu thay đổi con trỏ là một phần của chức năng phụ thuộc vào JS (giả sử bạn có thanh trượt), thì bạn sẽ không muốn con trỏ thay đổi nếu người dùng đã tắt JS.

— Peter Ajtai

3

Tôi đã sử dụng kết hợp với $('selector').css('cursor', 'auto');để loại bỏ phong cách khi di chuyển chuột ra khỏi khu vực con trỏ. Các lớp CSS có thể sạch hơn ... với $('...').addClass('someclass')và$('...').removeClass('someclass')

— vui nhộn vào

khi áp dụng điều này cho thẻ body và thay đổi thành một con trỏ tùy chỉnh như thế này: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );nó dường như không hoạt động. Tôi không biết nếu đây là một lỗi trong jquery hoặc chrome. havent đã thử nghiệm điều này trên các trình duyệt khác mặc dù.

— jcfrei

16

Cập nhật! Cải thiện mới! Tìm plugin @ GitHub !

Một lưu ý khác, trong khi phương thức đó đơn giản, tôi đã tạo một trình cắm jQuery ( được tìm thấy tại jsFiddle này, chỉ cần sao chép và quá khứ mã giữa các dòng nhận xét ) giúp thay đổi con trỏ trên bất kỳ phần tử nào đơn giản như $("element").cursor("pointer").

Nhưng đó không phải là tất cả! Hành động ngay và bạn sẽ nhận được các chức năng tay position& ishoverkhông phải trả thêm phí! Đúng vậy, 2 chức năng con trỏ rất tiện dụng ... MIỄN PHÍ!

Chúng hoạt động đơn giản như đã thấy trong bản 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");

Cũng thế:

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

Nguồn cung cấp có hạn, vì vậy hãy hành động ngay!

— SpYk3HH
nguồn

7

Làm thế nào để bạn thay đổi con trỏ của bạn thành ngón tay (như nhấp vào liên kết) thay vì con trỏ thông thường?

Điều này rất đơn giản để đạt được bằng cách sử dụng thuộc tính CSS cursor, không jQuerycần thiết.

Bạn có thể đọc thêm về: CSS cursor propertyvàcursor - CSS | MDN

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

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

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

Mở rộng đoạn trích

— Romulo
nguồn

1

Nó rất thẳng về phía trước

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

Hãy xem thử trên JSfiddle

— Abk
nguồn