При каком значении свойства cursor выводится стрелка

Свойство cursor определяет форму указателя мыши, когда он находится в границах блока. В целом вид курсора зависит от операционной системы и установленной темы оформления данного пользователя.

Курсоры общего назначения:

•  CSS2 CSS3 auto — браузер автоматически определяет тип курсора для отображения  в зависимости от типа и положения элемента, с учетом специфики опрерационной системы и пользовательских настроек. Например, но большенстве систем, для ссылок будет выставлен тип pointer, для текстовых блоков text и т.д.
• CSS2 CSS3 default  — курсор по умолчанию для текущей операционной системы и пользовательских настроек, как правило в стандартных темах оформления выглядит как стрелочка.
• CSS3 none — пустой курсор, не отображается ничего.

Курсоры для ссылок и текущего статуса:

• CSS3 context-menu — указывает, что для элемента под курсором доступно контекстное меню. Обычно отображается как стрелочка с небольшой иконкой меню рядом. Практически не поддреживается браузерами на основе WebKit (Safari, Chrome) и Gecko (Firefox)
• CSS2 CSS3 help — указывает, что для элемента под курсором доступна справочная информация. Обычно отображается как стрелочка с небольшим вопросительным знаком рядом, либо как просто вопросительный знак.
• CSS2 CSS3 pointer — указатель, такой типа по умолчанию используется для всех ссылок.
• CSS2 CSS3 progress — указывает, что система занята выполнением задачи, но у пользователя есть возможность продолжать взаимодействие с системой.
• CSS2 CSS3 wait — указывает, что  система занята выполением задачи, и пользователю необходимо подождать.

Курсоры для выбора:

• CSS3 cell — указывает, что данная ячейка таблицы может быть выбрана. Обычно отображается как символ «плюс» с широкими линиями.
• CSS2 CSS3 crosshair — отображается, как простой крестик.
• CSS2 CSS3 text — указывает, что текст в данном блоке можно выделить. Обычно отображается как заглавная буква I.
• CSS3 vertical-text — используется аналогично указателю text, за тем исключением, что обозначает текстовые блоки с вертикальным текстом. Обычно отображается как повернутая на 90° заглавная буква I.

Курсоры для перетаскивание (Drag&Drop):

• CSS3 alias — указывает, что для элемента будет создан ярлык. Часто отображается как стрелочка, с маленькой закругленной стрелочкой рядом.
• CSS3 copy — указывает, что элемент будет скопирован. Часто отображается как стрелочка, с небольшим знаком «плюс» рядом.
• CSS2 CSS3 move — указывает, что элемент будет перемещен. Часто отображается как четыре стрелочки в разные стороны из центра.
• CSS3 no-drop — указывает, что элемент невозможно перетащить на текущую позицию.
• CSS3 not-allowed — указывает, что текущее действие запрещено.

Курсоры для изменения размеров и прокрутки:

• CSS2 CSS3 e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize — группа курсоров обозначаемых стрелочками, используется как правило при обозначении возможности подвинуть край какого-нибудь блока в соотетствующую сторону
• CSS3 ew-resize, ns-resize, nesw-resize, nwse-resize
• Indicates a bidirectional resize cursor.
• CSS3 col-resize — Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
• CSS3 row-resize — Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
• CSS3 all-scroll — Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.

Пользовательские курсоры:

• CSS2 CSS3 uri — курсор из ресурса, обозначенного в URI. Если браузер не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если браузер не может обработать ни один из курсоров, определённый пользователем, он обязан использовать общий курсор в конце списка, например:
  .element {
  cursor: url(1.cur), url(1.png), auto;
  }

• CSS3 uri x y — расширенный формат пользовательского курсора, когда возможно задать координаты точки для курсора, которая будет являться основной для данного курсора. Если x и y не заданы, то берется точка 0 0 — верхний левый угол изображения. Координаты можно задавать для каждого файла с изображением, например:
  .element {
  cursor: url(1.cur) 5 5, url(1.png) 7 7, auto;
  }

  Доступные форматы изображений для курсоров зависят от браузера:

  	Internet Explorer	Firefox	Chrome	Safari	Opera
  .ani анимированные курсоры	> 6.0	—	—	—	—
  .cur	> 6.0	>1.5	>1.0	>3.0	—
  .png, .jpg, .gif* и другие форматы распозноваемые браузером как изображения	—	>1.5	>1.0	>3.0	—
  .svg	—	>4.0	>6.0	—	—

  *Анимированные GIF не делают анимированных курсоров, отображается только первый кадр

Специфические курсоры:

Данная группа курсоров работает только в конкретных браузерах и их не рекомендуется использовать в дизайне веб-страниц, вместо лучше использовать пользовательские курсоры подгруженные как изображения. А данную группу можно использовать при создании расширений и дополнений для конкретных браузеров.

WebKit (Safari, Chrome)

• -webkit-grab — указывает, что элемент может быть захвачен. Обычно отображается как расжатая рука. Аналогичен -moz-grab.
• -webkit-grabbing — указывает, что элемент в текущий момент захвачен. Обычно отображается как сжатая рука. Аналогичен -moz-grabbing.
• -webkit-zoom-in — указывает, что элемент может быть увеличен, или в данные момент уже увеличен. Аналогичен -moz-zoom-in.
• -webkit-zoom-out — указывает, что элемент может быть уменьшен, или в данные момент уже уменьшен. Аналогичен -moz-zoom-out.

Gecko (Firefox)

• -moz-cell — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 1.9.2 (Firefox 3.6)), вместо рекомендуется использовать курсор cell.
• -moz-alias — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор alias.
• -moz-context-menu — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор context-menu.
• -moz-copy — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор copy.
• -moz-spinning — устаревший курсор (с версии Gecko 1.7.1 (Firefox 1.0), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор progress.
• -moz-grab — указывает, что элемент может быть захвачен. Обычно отображается как расжатая рука. Аналогичен -webkit-grab.
• -moz-grabbing — указывает, что элемент в текущий момент захвачен. Обычно отображается как сжатая рука. Аналогичен -webkit-grabbing.
• -moz-zoom-in — указывает, что элемент может быть увеличен, или в данные момент уже увеличен. Аналогичен -webkit-zoom-in.
• -moz-zoom-out — указывает, что элемент может быть уменьшен, или в данные момент уже уменьшен. Аналогичен -webkit-zoom-out.

Примеры использования:

CSS 2.1

CSS 3

Свойство cursor определено в спецификациях CSS 2.1 и CSS 3 модуль Basic User Interface Level 3 (пользовательский интерфейс, уровень 3), применяется к всем элементам, и действует на всех визуальные, интерактивные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

• Спецификация стандарта CSS 2.1
• Спецификация стандарта CSS 3
• Описание на Mozilla Developer Network
• Описание на Microsoft Developer Network
• Описание на Safari Developer Library