За вид курсора отвечает CSS свойство «cursor
». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.
Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:
Полный список значений cursor
Значение | Windows | MacOS | Описание |
---|---|---|---|
auto |
Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента | ||
default |
![]() |
![]() |
Основной курсор |
none |
– | – | Курсор не отображается |
context-menu |
![]() |
![]() |
Доступно контекстное меню |
help |
![]() |
![]() |
Доступна вспомогательная информация |
pointer |
![]() |
![]() |
Указатель, обозначающий ссылку |
progress |
![]() |
![]() |
Программа занята, но пользователь может взаимодействовать с интерфейсом |
wait |
![]() |
![]() |
Программа занята |
cell |
![]() |
![]() |
Указывает на возможность выбора клетки таблицы |
crosshair |
![]() |
![]() |
Крестик, часто используемый для обозначения выбора на битовой карте |
text |
![]() |
![]() |
Значок выбора текста |
vertical-text |
![]() |
![]() |
Значок выбора вертикального текста |
alias |
![]() |
![]() |
Будет создана ссылка внутри страницы |
copy |
![]() |
![]() |
Указывает на возможность копирования |
move |
![]() |
![]() |
Указывает на возможность перемещения объекта |
no-drop |
![]() |
![]() |
Указывает на невозможность "сбрасывания" объекта |
not-allowed |
![]() |
![]() |
Указатель невозможности выполнения действия |
all-scroll |
![]() |
![]() |
Указатель возможности перемещения по странице в любом направлении |
col-resize |
![]() |
![]() |
Объект может быть раздвинут/сдвинут горизонтально |
row-resize |
![]() |
![]() |
Объект может быть раздвинут/сдвинут вертикально |
n-resize |
![]() |
![]() |
Грань, которая может быть перемещена |
e-resize |
![]() |
![]() |
|
s-resize |
![]() |
![]() |
|
w-resize |
![]() |
![]() |
|
ne-resize |
![]() |
![]() |
|
nw-resize |
![]() |
![]() |
|
se-resize |
![]() |
![]() |
|
sw-resize |
![]() |
![]() |
|
ew-resize |
![]() |
![]() |
Двунаправленное изменение размера |
ns-resize |
![]() |
![]() |
|
nesw-resize |
![]() |
![]() |
|
nwse-resize |
![]() |
![]() |
|
zoom-in |
![]() |
![]() |
Приближение или уменьшение |
zoom-out |
![]() |
![]() |
|
grab |
![]() |
![]() |
Указывает на возможность схватить и переместить объект |
grabbing |
![]() |
![]() |
Браузеры на мобильных устройствах не поддерживают свойство cursor
, но при этом в jQuery событие clik не сработает если у элемента нет свойства cursor: pointer
.
Все браузеры дают возможность установить элементу свой курсор из файла по URL, например:
Вторым параметром задаются координаты активной точки, в которой регистрируется нажатие мыши. По умолчанию это левый верхний угол (0,0).
Пример в действии:
Кроссбраузерность
Так как, у браузеров разная поддержка форматов фалов курсора:
- Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI.
- Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
У свойства cursor имеется возможность указать несколько курсоров, в приоритете будет первый в списке поддерживаемый формат.