Как я могу сделать курсор рукой, когда пользователь наводит курсор на элемент списка?

У меня есть список, и у меня есть обработчик кликов для его элементов:

  • foo
  • goo

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

С течением времени, как говорили люди, теперь вы можете просто использовать:

 li { cursor: pointer; } 

Использовать для li

 li:hover{ cursor: pointer; } 

См. Подробнее свойство cursor с примером после запуска fragmentа.

введите описание изображения здесь

 .auto { cursor: auto; } .deafult { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } .cursors > div { float: left; box-sizing: border-box; background:#f2f2f2; border:1px solid #ccc; width: 20%; padding: 10px 2px; text-align: center; white-space: nowrap; &:nth-child(even) { background: #eee; } &:hover { opacity: 0.25 } } 
 

Example of cursor

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

Для этого вам не требуется jQuery, просто используйте следующий css:

 li {cursor: pointer} 

И вуаля! Handy.

 li:hover { cursor: pointer; } 

Другие допустимые значения (которые не hand ) для текущей спецификации HTML можно просмотреть здесь .

использование

 cursor: pointer; cursor: hand; 

если вы хотите получить результат crossbrowser!

CSS:

 .auto { cursor: auto; } .default { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } 

Вы также можете иметь курсор для изображения:

 .img-cur { cursor: url(images/cursor.png), auto; } 

Эта нить выходит из-под контроля, она быстро переходила от курсоров к струнным инструментам. 🙂

К счастью, Google всегда отправляет меня сюда, когда мне нужно быстрое напоминание, для полного кросс-браузера используйте:

 cursor: pointer; cursor: hand; 
 li:hover {cursor: hand; cursor: pointer;} 

Я думаю, было бы разумно показывать только ручку / указатель курсора, когда доступен javascript. Таким образом, у людей не будет ощущения, что они могут нажимать на то, что не доступно для кликов.

Чтобы достичь этого, вы можете использовать javascript для добавления css к элементу, подобному этому

 $("li").css({"cursor":"pointer"}); 

или привязать его непосредственно к обработчику кликов.

Или, когда используется модернизатор в сочетании с , css будет выглядеть так:

 .js li { cursor: pointer; } 

Просто для полноты:

 cursor: -webkit-grab; 

также дает руку, которую вы знаете при перемещении изображения вокруг.

Весьма полезно, если вы хотите эмулировать поведение захвата с помощью jquery и mousedown.

введите описание изображения здесь

 ul li:hover{ cursor: pointer; } 

Для того, чтобы сделать что-нибудь доступным для обработки «mousechange», вы можете добавить class CSS:

 .mousechange:hover { cursor: pointer; } 
 Some text here 

Просто просто сделайте что-нибудь вроде этого:

 li { cursor: pointer; } 

Я применяю его в своем коде, чтобы узнать, как он работает:

 li { cursor: pointer; } 
 
  • foo
  • goo
 ul li:hover{ cursor: pointer; } 

для большего количества событий мыши проверьте свойство CSS-курсора

Все остальные ответы предполагают использование стандартного указателя CSS, однако есть два метода:

  1. Применить cursor:pointer; свойства CSS cursor:pointer; к элементам. (Это стиль по умолчанию, когда курсор наводится на кнопку.)

  2. Примените cursor:url(pointer.png); свойства CSS cursor:url(pointer.png); используя пользовательскую графику для вашего указателя. Это может быть более желательно, если вы хотите убедиться, что пользовательский опыт идентичен на всех платформах (вместо того, чтобы позволить браузеру / ОС решить, как должен выглядеть ваш курсор указателя). Обратите внимание, что резервные опции могут быть добавлены в случае, если изображение не найдено, включая вторичные URL-адреса или любые другие параметры, т.е. cursor:url(pointer.png,fallback.png,pointer);

Конечно, они могут применяться к элементам списка таким образом: li{cursor:pointer;} , как class .class{cursor:pointer;} , или как значение для атрибута style каждого элемента style="cursor:pointer;" ,

для основного символа руки: попробуйте

 cursor:pointer 

Если вам нужен ручной символ, например, перетащите какой-нибудь элемент и опустите его,

пытаться

 cursor:grab 

Вы можете использовать одно из следующих действий:

 li:hover { cursor: pointer; } 

или

 li { cursor: pointer; } 

Рабочий пример 1:

  li:hover { cursor: pointer; } 
 
  • foo
  • bar

Вы также можете использовать следующий стиль

 li { cursor: grabbing; } 

Вы можете использовать приведенный ниже код

li: hover {cursor: pointer; }

Использование HTML Hack

Примечание: это не рекомендуется, так как считается плохой практикой

Обертка содержимого в привязном теге, содержащем атрибут href будет работать без явного применения cursor: pointer; свойство с побочным эффектом свойств привязки (с поправкой на CSS):

Это должно работать

  
  • Как импортировать веб-шрифт Google в файл CSS?
  • Получите две колонки с разными цветами фона, которые простираются до края экрана
  • Как выбрать «последний ребенок» с определенным именем classа в CSS?
  • css3 text-shadow в IE9
  • Переход CSS3 на клик с использованием чистого CSS
  • получить процентное значение правила CSS в jQuery
  • Sass @each интерполяция переменных
  • css трансформировать, зубчатые края в хроме
  • Каковы правила совпадения запросов медиа-запросов CSS?
  • Отключить кнопки запуска webkit на тип ввода = «номер»?
  • Почему CSS float не меняет ширину следующего div?
  • Давайте будем гением компьютера.