Свойство cursor в CSS определяет то, как будет выглядеть курсор мыши при наведении на элемент, в котором установлено это свойство. Очевидно, это актуально только в браузерах / операционных системах, в которых есть мышь и курсор. В мобильных устройствах поддержки этого свойства нет, так как нет мышки.
Значений у этого свойства много. Сначала приведем примеры их работы – подведите курсор к названию свойства и увидите его изменение при наведении.
See the Pen
cursor by Андрей (@adlibi)
on CodePen.
Синтаксис
Значение свойство указывается в следующем виде:
cursor: pointer;При этом вместо pointer нужно указать нужное значение из таблицы со всеми видами значений ниже. По умолчанию установлено значение auto.
| Вид | Значение | Примечание |
|---|---|---|
 |
default | |
 |
context-menu | Работает только в IE10+. |
 |
help | |
 |
pointer | Рука автоматически отображается при наведении курсора на ссылку. |
 |
progress | |
 |
wait | |
 |
cell | |
 |
crosshair | |
 |
text | |
 |
vertical-text | |
 |
alias | |
 |
copy | |
 |
move | |
 |
no-drop | Отображается как not-allowed везде, кроме IE. |
|
not-allowed | |
|
all-scroll | |
 |
col-resize | |
 |
row-resize | |
 |
n-resize | |
 |
ne-resize | |
 |
e-resize | |
 |
se-resize | |
|
s-resize | |
|
sw-resize | |
|
w-resize | |
|
nw-resize | |
|
nesw-resize | |
 |
nwse-resize | |
 |
zoom-in | IE не поддерживает лупу. |
 |
zoom-out | IE не поддерживает лупу |
 |
grab | Chrome, Opera, Safari поддерживают значение -webkit-grab. |
 |
grabbing | Chrome, Opera, Safari поддерживают значение -webkit-grabbing. |
Произвольный курсор
Вы также можете установить свой курсор в виде изображения:
cursor: url(<адрес>), url(<адрес>), ..., <курсор>
Если указано несколько изображений, браузер будет переходить к следующему варианту, если не удалось загрузить текущее изображение. Заканчиваться выражение должно одним из предустановленных свойств, например, pointer. Если не указать такое ключевое слово, можно получить сообщение об ошибке “invalid property value”.
После изображения также можно указать пару чисел (со значениями не более 32), которые будут координатами для смещения изображения относительно верхнего левого угла. Например:
cursor: url(cursor.png) 4 8, auto;
Можно использовать разные графические форматы, в том числе SVG.