свойство 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;
}
свойство cursor: crosshair; (CSS 2.1)  
.elementCursorDefault {
    cursor: default;
}
свойство cursor: default; (CSS 2.1)  
.elementCursorPointer {
    cursor: pointer;
}
свойство cursor: pointer; (CSS 2.1)  
.elementCursorMove {
    cursor: move;
}
свойство cursor: move; (CSS 2.1)  
.elementCursorEResize {
    cursor: e-resize;
}
свойство cursor: e-resize; (CSS 2.1)  
.elementCursorNEResize {
    cursor: ne-resize;
}
свойство cursor: ne-resize; (CSS 2.1)  
.elementCursorNWResize {
    cursor: nw-resize;
}
свойство cursor: nw-resize; (CSS 2.1)  
.elementCursorNResize {
    cursor: n-resize;
}
свойство cursor: n-resize; (CSS 2.1)  
.elementCursorSEResize {
    cursor: se-resize;
}
свойство cursor: se-resize; (CSS 2.1)  
.elementCursorSWResize {
    cursor: sw-resize;
}
свойство cursor: sw-resize; (CSS 2.1)  
.elementCursorSResize {
    cursor: s-resize;
}
свойство cursor: s-resize; (CSS 2.1)  
.elementCursorWResize {
    cursor: w-resize;
}
свойство cursor: w-resize; (CSS 2.1)  
.elementCursorText {
    cursor: text;
}
свойство cursor: text; (CSS 2.1)  
.elementCursorWait {
    cursor: wait;
}
свойство cursor: wait; (CSS 2.1)  
.elementCursorHelp {
    cursor: help;
}
свойство cursor: help; (CSS 2.1)  
.elementCursorProgress {
    cursor: progress;
}
свойство cursor: progress; (CSS 2.1)  
.elementCursorCustomCur1 {
    cursor: url('test1.png');
}
свойство cursor: url; (CSS 2.1)  
.elementCursorCustomCur2 {
    cursor: url('test2.gif');
}
свойство cursor: url; (CSS 2.1)  
.elementCursorCustomCur3 {
    cursor: url('test4.jpg');
}
свойство cursor: url; (CSS 2.1)  
.elementCursorCustomCur4 {
    cursor: url('cursorStat.cur');
}
свойство cursor: url; (CSS 2.1)  
.elementCursorCustomCur5 {
    cursor: url('cursorAnim.ani');
}
свойство cursor: url; (CSS 2.1)  

CSS 3

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

 

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

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

Краткое описание

тип курсора мыши при наведении на элемент

Синтаксис:

CSS2 [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

CSS3 [ [<uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll ] ] | inherit

По умолчанию:

auto

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные, интерактивные

Объектная модель документа (DOM):

[элемент].style.cursor

Кроссбраузерная совместимость

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+