Курсор стрелка: Курсор — CSS | MDN

Курсор — CSS | MDN

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

/* Применение ключевых значений */
cursor: pointer;
cursor: auto;
/* Использование URL и координат */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;
/* Глобальные значения */
cursor: inherit;
cursor: initial;
cursor: unset;

Значения

<url>

Ссылка или разделённый запятыми список ссылок: url(…), url(…), …, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details.

<x> <y>
Формальный синтаксис
cursor = 
[ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu |
(en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize |
(en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)
. foo {
  cursor: crosshair;
}
/* use prefixed-value if "zoom-in" isn't supported */
.bar {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz {
  cursor: url(hyper.cur), auto;
}
Specification
CSS Basic User Interface Module Level 4
# cursor

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Using URL values for the cursor property
  • pointer-events
  • Cursor Property (MSDN)

Last modified: , by MDN contributors

Курсор на кнопке в браузере — стрелка или палец? — Хабр Q&A

Мне кажется, что курсор надо превращать в палец над любым элементом, который можно нажать и получить какое-то действие. Но если вы используете для кнопок стандартный вид (по умолчанию), то можно и стрелку оставить (курсор по умолчанию).

Ответ написан

Комментировать

Палец удобнее, сразу даёт понять что всё ок и можно жать

Ответ написан

более трёх лет назад

Комментировать

Комментировать

cursor: pointer нагляднее чем смена стиля кнопки, например, если картинки и стили отключены — pointer при наведении на название даст знать что будет действие (с обычным курсором ничего не произойдет).

Google, Apple, Twitter используют pointer

Ответ написан

Ответ написан

Комментировать

Если читатель привык видеть для гиперссылок палец, направленный вверх, а для кнопок — стрелку, направленную по диагонали вверх и влево, то можно попробовать для кнопок нечто среднее: палец, но направленный по диагонали вверх и влево. Вот я его нарисовал:


Вот тот же палец с двукратным увеличением для удобства просмотра:


Задать произвольную форму курсора, загружая её из файла, можно в соответствии с CSS 2.1, который совсем недавно (7 июня 2011 года) объявлен стандартом (W3C Recommendation). Это делается указанием значения

url()в свойстве cursor.

Ответ написан

Комментировать

1. Если кнопка — действительно кнопка — стрелка
2. Если ссылка, то подчеркнутая и палец.
3. Если аякс ссылка, то пунтирно-подчеркнутая и палец.

4. Если кнопка нарисованная, то тут уже смотря как нарисовали. Если очень похоже на обычную кнопку или навороченную средствами CSS — стрелка. Если рисунок на пол экрана «Зарегистрироваться» или типа того — палец.
Например как на www.e-kontur.ru/ регистрация.

Ответ написан

Что подумает пользователь, когда курсор над кнопкой превратится в руку?
Мысль 1: Комп заглючил или подвис.
Мысль 2: Если я нажму на кнопку, то перейду на сторонний сайт.

Мысль N: Создатель сайта специально подумал, что я отождествлю кнопку с реальным физическим объектом и изменившийся курсор подскажет мне, что на кнопку можно нажать.

P.S. Не вводите пользователей в замешательство, они этого не любят.

Ответ написан

И ещё одно мнение за стрелку. Больше всего не нравится именно изображения пальца над ссылками. Может потому что он занимает больше места, чем стрелка, может дело привычки. Но на всех Windows-машинах я ставил другой курсор вместо пальца. Хотя тут подумав понял, что в КДЕ он так не мешает.

Т. е. если и уходить от стрелки, то на кастомный курсор, загруженный из файла.

Ответ написан

Кнопки в гугле меняют курсор на палец (но их кнопки выглядят несколько нетрадиционно).
Яндекс оставляет стрелку (стандартная кнопка).
Вконтакте (нестандартная кнопка) — палец.
Одноклассники — стандартная кнопка, стрелка.

Эти 4 сайта посещает большая часть интернет-пользователей. Следовательно, они привыкли к простому правилу:

— если кнопка обычная, ожидаем увидеть курсор-стрелку
— если кнопка «красивая» — палец.

Ответ написан

Есть такая мысль:
Если нажатие на кнопку приводит к загрузке новой страницы — то «палец». То есть, аналогично щелчку по обычной гиперссылке.
Если же нажатие на кнопку оставляет посетителя на этой же странице — «стрелка». То есть, аналогично щелчку по «чек-боксу».

Например, для «классических» веб-форм:
Кнопка [Очистить] — «Стрелка»
Кнопка [Отправить] — «Палец»

Как исключение из этого правила — «ссылки» подчеркнутые пунктиром:
Несмотря на то, что со страницы они не уводят — курсор «палец».

Ответ написан

Свойство CSS: курсор | HTML Dog

Внешний вид курсора, когда он проходит над полем.

Курсоры зависят от операционной системы и могут сильно отличаться на разных компьютерах.

Возможные значения

Наведите указатель мыши на строку, если вы держите курсор, чтобы увидеть, как ваш компьютер обрабатывает каждый курсор.

Общего назначения

Значение Описание
авто Изменения в зависимости от ситуации. Значение по умолчанию.
по умолчанию Курсор платформы по умолчанию. Обычно стрелка.
нет Нет курсора. Удивительно.

Ссылки и статус

Значение Описание
указатель Указывает на ссылку. Обычно указующая рука.
помощь Указывает на наличие справки по объекту, над которым находится курсор. Обычно там стоит вопросительный знак.
progress Указывает, что программа что-то обрабатывает, но с ней еще можно взаимодействовать. Обычно стрелка в сочетании с таймером.
ожидание Указывает, что пользователь должен ждать, пока программа занята. Обычно таймер.
контекстное меню Указывает, что контекстное меню следует ожидать при наведении курсора на объект. Обычно стрелка с мини-меню.

Выбор

Значение Описание
текст Указывает текст. Обычно двутавровая балка.
перекрестие Тонкий крест в виде плюса.
ячейка Указывает табличные ячейки. Толстый крест, похожий на плюс.
vertical-text Для вертикального текста, удивительно. Обычно горизонтальная двутавровая балка.

Изменение размера и прокрутка

Значение Описание
n-resize Север: указывает на то, что можно переместить или изменить размер вверх. Обычно стрелка вверх.
ne-resize Северо-восток: можно перемещать вверх и вправо. Обычно это диагональная стрелка, направленная вверх и вправо.
e-resize Восток: можно перемещать вправо. Обычно это стрелка вправо.
se-resize Юго-восток: можно перемещать вниз и вправо. Обычно это диагональная стрелка, указывающая вниз и вправо.
s-resize Юг: можно перемещать вниз. Обычно это стрелка вниз.
sw-resize Юго-запад: можно перемещать вниз и влево. Обычно это диагональная стрелка, указывающая вниз и влево.
w-resize Запад: можно перемещать влево. Обычно это стрелка, указывающая влево.
nw-resize Северо-запад: можно перемещать вверх и влево. Обычно это диагональная стрелка, направленная вверх влево.
ew-resize Восток + запад: два направления: можно перемещать влево или вправо. Обычно это двойная стрелка влево и вправо.
изменение размера ns Север + юг: два направления: можно перемещать вверх или вниз. Обычно это двойная стрелка вверх и вниз.
new-resize Северо-восток + юго-запад: два направления: можно перемещать вверх и вправо или вниз и влево. Обычно это двойная стрелка вверх-вправо и вниз-влево.
nwse-resize Северо-запад + юго-восток: два направления: можно перемещать вверх и влево или вниз и вправо. Обычно это двойная стрелка вверх-влево и вниз-вправо.
col-resize Размер элемента или столбца можно изменить влево или вправо. Обычно это двойная стрелка влево и вправо с чертой посередине.
row-resize Размер элемента или строки можно изменить в большую или меньшую сторону. Обычно это двойная стрелка вверх и вниз с чертой посередине.
all-scroll То, что можно прокручивать в любом направлении. Обычно это четверная стрелка, указывающая вверх, вправо, вниз и влево.

Перетаскивание

Значение Описание
перемещение Что-то можно переместить. Обычно это четверная стрелка, указывающая вверх, вправо, вниз и влево.
псевдоним Указывает на возможное создание ярлыка. Обычно изогнутая стрелка.
копия Кое-что можно скопировать. Обычно это стрелка со знаком «+».
без сброса Что-то перетаскиваемое, что нельзя сбросить в текущем месте. Обычно стрелка рядом с кругом с перечеркнутой линией.
не разрешено Действие невозможно выполнить. Обычно используется круг с перечеркнутой линией.
захватить То, что можно перетащить, чтобы переместить. Обычно открытая ладонь.
захват То, что тянут, чтобы переместить. Обычно закрытая рука.

Увеличение

Значение Описание
увеличение Указывает на то, что можно увеличить. Обычно увеличительное стекло со знаком «+».
уменьшение Указывает на то, что можно уменьшить. Обычно увеличительное стекло со знаком «-».

и т. д.

Значение Описание Пример
[URL], [значение] Список изображений, разделенных запятыми, которые будут использоваться в качестве пользовательского курсора. Если первый не найден или несовместим, браузер перейдет к следующему в списке. Список должен заканчиваться одним из приведенных выше ключевых слов, чтобы действовать как запасной вариант. url("narwhal.png"), auto
inherit
initial
unset

Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

Пример

аббр {курсор: помощь; }
 

Поддержка браузера

Большинство курсоров широко поддерживаются в настольных браузерах (в меньшей степени в мобильных браузерах с сенсорным экраном без курсоров, потому что, ну, это очевидно). Однако будьте осторожны с масштабированием и захватом курсоров.

Могу ли я использовать css3-курсоры? Данные о поддержке функции css3-cursors в основных браузерах с сайта caniuse.com.

И могу ли я использовать курсоры масштабирования? Данные о поддержке курсоров масштабирования в основных браузерах с сайта caniuse.com.

О, и можно ли использовать курсоры захвата? Данные о поддержке курсоров захвата в основных браузерах с сайта caniuse. com.

круглых указателей против стрелок мыши

До появления курсора Apple iPad стрелки мыши практически не менялись с 1981 года. Они всегда были одной и той же наклонной стрелкой от инженера Xerox Дугласа Энгла.

Затем пару лет назад Apple заново изобрела курсор, чтобы он был ‘ touch-first ’ — в новой iPadOS курсор стал прозрачной круглой каплей, которая взаимодействует с элементами так же, как палец. Однако он более динамичен и интерактивен, чем обычная стрелка мыши — например, цвет адаптируется к различному фону для удобства доступа:

Курсор меняется с темного на светлый в зависимости от того, что находится под ним, сохраняя хороший контраст.

В моем последнем посте о курсорах инструментов для совместной работы я рассказал, что в наши дни указатели мыши бывают разных форм и размеров и могут и даже включают элементы, которые становятся «видеокурсорами» или «курсорами аватара». Поиграв с трекпадом iPad, я подумал, что этот курсор-клякса — еще одна отличная демонстрация того, как курсоры могут стать более полезными и интересными в использовании за счет изменения их формы и формы.

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

Формы курсора и магнетизм указателя

В iPadOS, когда вы приближаетесь и наводите курсор на определенные элементы, такие как кнопки, курсор трансформируется вокруг элемента. , как маленькая капсула. Это то, что Apple называет «9».0399 Pointer Magnetism ‘:

В соответствии с рекомендациями Apple по человеческому интерфейсу, каждый элемент пользовательского интерфейса имеет «область попадания», и по мере приближения к ней система начинает преобразовывать форму указателя. Это также работает с динамическими движениями, которые больше связаны с тем, как двигался бы ваш палец:

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

Границы курсора

Если вы включите границу курсора в настройках специальных возможностей, этот магнетизм указателя станет более очевидным. Это похоже на то, как исходный зеленый круг превращается в зеленый квадрат, выделяя элементы, чтобы показать, что они находятся в фокусе:

Это даже немного похоже на контур фокуса на веб-сайте (когда вы перемещаетесь по элементам на странице).

Также могут быть приятные взаимодействия. Когда курсор находится внутри кнопки, он может светиться, когда вы перемещаете мышь к краям:

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

Доступные курсоры

В отличие от курсора мыши, который имеет тень и границу, сенсорный указатель иногда трудно обнаружить. Чтобы упростить задачу, вы можете изменить цвет, ширину и размер его границы:

При изменении размера курсора в центре добавляется меньшая фокальная точка, чтобы элементы наведения на экране оставались точными.

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

Полезные указатели и аннотации

Выше мы рассмотрели некоторые параметры доступности по умолчанию на iPad, но разработчики могут дополнительно настроить внешний вид и форму в соответствии с контекстом своего приложения. Например, как показано в руководстве для разработчиков, они могут уменьшить размер курсора и добавить некоторую контекстную информацию, чтобы сделать ее более полезной:

Полезная аннотация указателя

Рассмотрите возможность улучшения работы указателя, отображая пользовательские аннотации, предоставляющие полезную информацию. Например, вы можете отображать значения X и Y, когда люди держат указатель над графической областью в вашем приложении. Keynote использует аннотации для отображения текущей ширины и высоты изображения с изменяемым размером.

Прочтите полное руководство, чтобы узнать больше.

Круглая указка, вероятно, стала популярной благодаря устройствам с сенсорным экраном и приложениям. Впервые я помню, как «сенсорные указатели» использовались вместо пальцев на демонстрациях и прототипах приложений в таких инструментах, как Principle или Flinto. Вот более свежая в ProtoPie:

Закругленный курсор на прототипах (ProtoPie)

Полезные курсоры в Интернете

Поскольку планшеты делают круглые курсоры еще более распространенным явлением, круглые курсоры, похоже, становятся все более популярными и в Интернете.