Css при каком значении свойства cursor курсор задает браузер

Краткая информация

Синтаксис

Значения

Пример

Примечание

Браузеры

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.02.2020

Редакторы: Влад Мержевич

/* Using URL and coordinates */
cursor: url(‘cursor1.png’) 4 12, auto;
cursor: url(‘cursor2.png’) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

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