Як змінити курсор з вказівника на палець за допомогою jQuery?

128

Це, мабуть, справді просто, але я ніколи цього не робив. Як змінити курсор на палець (наприклад, для натискання на посилання) замість звичайного вказівника?

І як це зробити за допомогою jQuery, оскільки саме для цього я його використовую.

javascript jquery css

— Андрій
джерело

247

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

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

Звичайний курсор стрілки - це просто "за замовчуванням".

весь можливий покажчик за замовчуванням виглядає DEMO

— Пітер Бейлі
джерело

14

Якщо можливо, зробіть це за допомогою CSS (скажімо, з: курсором наведення курсора) і взагалі уникайте jquery.

— Хто

8

@ Хто, звичайно, але якщо зміна курсору є частиною функціоналу, який залежить від JS (скажімо, у вас є слайдер), то ви не хочете, щоб курсор змінювався, якщо користувач вимкнув JS.

— Пітер Айтай

3

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

— Jocull

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

— jcfrei

16

Оновлення! Нове та вдосконалене! Знайдіть плагін @ 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

— Абк
джерело