Как изменить курсор от указателя к пальцу с помощью jQuery?

Это, наверное, очень просто, но я никогда не делал этого раньше. Как изменить курсор на палец (например, для ссылки на ссылки) вместо обычного указателя?

И как это сделать с помощью jQuery с тех пор, для чего я его использую.

Ответ 1

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

Я знаю, что это может сбивать с толку по вашему первоначальному вопросу, но курсор "палец" на самом деле называется "указатель".

Обычный курсор со стрелкой - просто "по умолчанию".

все возможные указатели по умолчанию выглядят DEMO

Ответ 2

Update! Новый и улучшенный! Найти плагин @ GitHub!

В другой заметке, в то время как этот метод прост, я создал плагин jQuery (, найденный в этом jsFiddle, просто скопируйте и прошлый код между строками комментариев), что позволяет сменить курсор на любой элемент так же просто, как $("element").cursor("pointer").

Но это не все! Действуйте сейчас, и вы получите ручные функции position и ishover без дополнительной оплаты! Это правильно, 2 очень удобные функции курсора... БЕСПЛАТНО!

Они работают так же просто, как в демонстрации:

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

также:

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

Поставки ограничены, поэтому действуйте сейчас!

Ответ 3

Как изменить курсор на палец (например, для перехода по ссылкам) вместо обычного указателя?

Это очень просто сделать, используя свойство CSS cursor, нет необходимости в jQuery.

Вы можете прочитать больше о: CSS cursor property и cursor - CSS | MDN

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

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

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

Ответ 4

Это очень прямо

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