свойство 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

Значение	Образец	Результат
.elementCursorCrosshair { cursor: crosshair; }
.elementCursorDefault { cursor: default; }
.elementCursorPointer { cursor: pointer; }
.elementCursorMove { cursor: move; }
.elementCursorEResize { cursor: e-resize; }
.elementCursorNEResize { cursor: ne-resize; }
.elementCursorNWResize { cursor: nw-resize; }
.elementCursorNResize { cursor: n-resize; }
.elementCursorSEResize { cursor: se-resize; }
.elementCursorSWResize { cursor: sw-resize; }
.elementCursorSResize { cursor: s-resize; }
.elementCursorWResize { cursor: w-resize; }
.elementCursorText { cursor: text; }
.elementCursorWait { cursor: wait; }
.elementCursorHelp { cursor: help; }
.elementCursorProgress { cursor: progress; }
.elementCursorCustomCur1 { cursor: url('test1.png'); }
.elementCursorCustomCur2 { cursor: url('test2.gif'); }
.elementCursorCustomCur3 { cursor: url('test4.jpg'); }
.elementCursorCustomCur4 { cursor: url('cursorStat.cur'); }
.elementCursorCustomCur5 { cursor: url('cursorAnim.ani'); }

CSS 3

Значение	Образец	Результат
.elementCursorNone { cursor: none; }
.elementCursorContextMenu { cursor: context-menu; }
.elementCursorCell { cursor: cell; }
.elementCursorVerticalText { cursor: vertical-text; }
.elementCursorAlias { cursor: alias; }
.elementCursorCopy { cursor: copy; }
.elementCursorNoDrop { cursor: no-drop; }
.elementCursorNotAllowed { cursor: not-allowed; }
.elementCursorEWResize { cursor: ew-resize; }
.elementCursorNSResize { cursor: ns-resize; }
.elementCursorNESWResize { cursor: nesw-resize; }
.elementCursorNWSEResize { cursor: nwsw-resize; }
.elementCursorColResize { cursor: col-resize; }
.elementCursorRowResize { cursor: row-resize; }
.elementCursorAllScroll { cursor: all-scroll; }
.elementCursorCustomCur6 { cursor: url('cursorSVG.svg'); }

Свойство 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