Курсор

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Описание

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

Начальное значениеauto
Применяется квсе элементы
Наследуетсяда
Обработка значениякак указано, но с абсолютными значениями url
Animation typediscrete

Синтаксис

/* Применение ключевых значений */
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>
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
Ключевые слова

Наведите курсор на картинку, чтобы увидеть пример в действии:

Категория Значение Вид Описание
Основные auto Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.
Например: при наведении на текст отобразит курсор text.
default default.gif Основной курсор платформы, обычно стрелочка.
none Курсор не отображается.
Ссылки и статусы выполнения задач context-menu context-menu.png Доступно контекстное меню.
help help.gif Доступна вспомогательная информация.
pointer pointer.gif Указатель, обозначающий ссылку, обычно указующая рука.
progress progress.gif Программа занята, но пользователь может взаимодействовать с интерфейсом (в отличие от wait).
wait wait.gif Программа занята (песочные часы).
Выделение cell cell.gif Указывает на возможность выбора клетки или клеток таблицы.
crosshair crosshair.gif Крестик, часто используемый для обозначения выбора на битовой карте.
text text.gif Значок выбора текста.
vertical-text vertical-text.gif Значок выбора вертикального текста.
"Захвати и перенеси" alias alias.gif Будет создана ссылка внутри страницы.
copy copy.gif УКазывает на возможность копирования.
move move.gif

Указывает на возможностсь перемещения объекта.

no-drop no-drop.gif Указывает на невозможность "сбрасывания" объекта.
В Windows и Mac OSX то же самое что и not-allowed.
not-allowed not-allowed.gif Указатель невозможности выполнения действия.
Изменение размера, прокручивание (скроллинг) all-scroll all-scroll.gif Указатель возможности перемещения по странице в любом направлении.
в Windows то же самое что move.
col-resize col-resize.gif Объект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.
row-resize row-resize.gif Обьект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.
n-resize Example of a resize towards the top cursor Грань или грани могут быть перемещены. Например se-resize используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.
e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif Двунаправленное изменение размера.
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
Масштабирование zoom-in zoom-in.gif

Приближение или уменьшение.

zoom-out zoom-out.gif
Захват grab grab.gif

Указывает на возможность схватить и переместить объект.

grabbing grabbing.gif

Формальный синтаксис

[ [ <url> [ <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 | zoom-in | zoom-out | grab | grabbing ] ]

Примеры

.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;
}

Спецификации

Спецификация Статус Комментарий
CSS Basic User Interface Module Level 3
Определение 'cursor' в этой спецификации.
Рекомендация Addition of several keywords and the positioning syntax for url().
CSS Level 2 (Revision 1)
Определение 'cursor' в этой спецификации.
Рекомендация Первоначальное определение

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
cursorChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites.
IE Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.
Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
aliasChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
all-scrollChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 6Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
autoChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
cellChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
col-resizeChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 6Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
context-menuChrome Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания This cursor is only supported on macOS and Linux.
Edge Полная поддержка 12Firefox Полная поддержка 1.5
Замечания
Полная поддержка 1.5
Замечания
Замечания This cursor is only supported on macOS and Linux.
IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18
Замечания
Полная поддержка 18
Замечания
Замечания This cursor is only supported on macOS and Linux.
Firefox Android Нет поддержки НетOpera Android Полная поддержка 14
Замечания
Полная поддержка 14
Замечания
Замечания This cursor is only supported on macOS and Linux.
Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Замечания
Полная поддержка 1.0
Замечания
Замечания This cursor is only supported on macOS and Linux.
copyChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
crosshairChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
defaultChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Grab cursors (grab and grabbing)Chrome Полная поддержка 68
Замечания
Полная поддержка 68
Замечания
Замечания Chrome also continues to support the prefixed versions.
Полная поддержка 1
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome 22 added Windows support.
Edge Полная поддержка 14Firefox Полная поддержка 27
Полная поддержка 27
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 55
Замечания
Полная поддержка 55
Замечания
Замечания Opera also continues to support the prefixed versions.
Полная поддержка 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera 22 added Windows support.
Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Нет поддержки НетChrome Android Полная поддержка 68
Замечания
Полная поддержка 68
Замечания
Замечания Chrome also continues to support the prefixed versions.
Полная поддержка 18
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome 22 added Windows support.
Firefox Android Нет поддержки НетOpera Android Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания Opera also continues to support the prefixed versions.
Полная поддержка 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera 22 added Windows support.
Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 10.0
Полная поддержка 10.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-
helpChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
inheritChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 8Opera Полная поддержка 9Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
moveChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
no-dropChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 6Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
noneChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 9Opera Полная поддержка 15Safari Полная поддержка 5WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 4.2Samsung Internet Android Полная поддержка 1.0
not-allowedChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 6Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
pointerChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 6Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
progressChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 6Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
row-resizeChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 6Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
textChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
url()Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5
Замечания
Полная поддержка 1.5
Замечания
Замечания Firefox 4 added macOS support.
IE Полная поддержка 6Opera Полная поддержка 15Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
url() positioning syntaxChrome Полная поддержка 1Edge Полная поддержка 79Firefox Полная поддержка 1.5
Замечания
Полная поддержка 1.5
Замечания
Замечания Firefox 4 added macOS support.
IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
vertical-textChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Нет поддержки НетOpera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
waitChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1.2WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Zoom cursors (zoom-in and zoom-out)Chrome Полная поддержка 37
Полная поддержка 37
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 24
Полная поддержка 24
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 24
Полная поддержка 24
Нет поддержки 15 — 23
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Нет поддержки НетChrome Android Полная поддержка 37
Полная поддержка 37
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Нет поддержки НетOpera Android Полная поддержка 24
Полная поддержка 24
Нет поддержки 14 — 24
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 3.0
Полная поддержка 3.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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