Курсор
======

CSS-свойство `cursor` устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом.

 Внешний вид курсора помогает информировать пользователей об операциях, которые можно выполнять при взаимодействии с элементом, включая: выделение текста, активацию справки или контекстного меню, копирование содержимого, изменение размера таблиц и так далее.
 Вы можете указать *тип* курсора с помощью ключевого слова или загрузить свой значок (с дополнительными резервными изображениями и ключевым словом в качестве резервного варианта отображения).

Интерактивный пример
--------------------

Синтаксис
---------


```css
/\* Ключевые слова \*/
cursor: auto;
cursor: pointer;
/\* … \*/
cursor: zoom-out;

/\* Использование с обязательным резервным ключевым словом \*/
cursor: url(hand.cur), pointer;

/\* Использование URL и координат с обязательным резервным ключевым словом \*/
cursor:
  url(cursor\_1.png) 4 12,
  auto;
cursor:
  url(cursor\_2.png) 2 2,
  pointer;

/\* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом \*/
cursor:
  url(cursor\_1.svg) 4 5,
  url(cursor\_2.svg),
  /\* …, \*/ url(cursor\_n.cur) 5 5,
  progress;

/\* Глобальные значения \*/
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;
```

### Значения

`<url>` Необязательный

`url()` (en-US) или разделенный запятыми список `url(), url(), …`, указывающий на файл изображения.
 В качестве запасного варианта можно указать несколько `url()` на случай, если некоторые типы изображений курсора не поддерживаются.
 Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка.


`<x>`, `<y>` Необязательный

Необязательные координаты X и Y, задающие указательную точку курсора.

 Эти значения необходимо указывать в координатах изображения.
 Они располагаются относительно верхнего левого угла изображения (соответствует`0 0`) и ограничены размерами изображения курсора.
 Если эти значения не указаны, они могут быть прочитаны из самого файла, в противном случае по умолчанию они будут находиться в верхнем левом углу изображения.


`keyword`

Ключевое слово *должно* быть установлено для указания типа используемого курсора или резервного курсора, который будет использоваться, если не удастся загрузить указанные значки.

Доступные ключевые слова перечислены в таблице ниже. Значения кроме `none` (что означает отсутствие курсора), являются изображением, которое будет использовано для отображения курсора. Вы можете навести указатель мыши на строки таблицы, чтобы увидеть эффект применения различных значений ключевых слов.

| Категория | Значение | Вид | Описание |
| --- | --- | --- | --- |
| Основные | `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 |

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано, но с абсолютными значениями `url` (en-US) |
| Animation type | discrete |

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

cursor =   
  [ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)    
  
<url> =   
  <url()>  | (en-US)  
  <src()>    
  
<x> =   
  x    
  
<y> =   
  y    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (en-US) )    
  
```

Примеры
-------

### Задание типа курсора


```css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/\* Использование резервного ключевого слова обязательно при использовании URL \*/
.baz {
  cursor: url("hyper.cur"), auto;
}
```

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # cursor |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `pointer-events`
* `url()` (en-US) function