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

128

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

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

javascript jquery css

— Андрей
источник

247

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

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

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

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

— Питер Бейли
источник

14

Если возможно, сделайте это через CSS (скажем, с помощью селектора: hover) и вообще избегайте jquery.

— The Who

8

@The Who - Конечно, но если изменение курсора является частью функциональности, которая зависит от JS (скажем, у вас есть слайдер), тогда вы не хотите, чтобы курсор изменялся, если у пользователя отключен JS.

— Peter Ajtai

4

Я использовал это вместе с, $('selector').css('cursor', 'auto');чтобы убрать стиль при перемещении мыши из области указателя. Классы CSS могут быть чище ... с $('...').addClass('someclass')and$('...').removeClass('someclass')

— jocull

при применении этого к тегу body и переходе на настраиваемый курсор, например: $('body').css( 'cursor', 'url(openhand.cur) 4 4, move;' );это не работает. Я не знаю, ошибка ли это в jquery или chrome. Однако не тестировал это в других браузерах.

— jcfrei

17

Обновить! Новое и улучшенное! Найдите плагин на 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!

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

— SpYk3HH
источник

7

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

Этого очень просто добиться с помощью свойства 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>

Развернуть фрагмент

— Ромуло
источник

1

Это очень просто

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

— АБК
источник