Оглавление
cursor
. Оно принимает как набор стандартных значений имеющих различное представление в разных операционных системах, так и загрузку файла, для отрисовки курсора.Стандартные курсоры в CSS
Для установки курсора из стандартного набора доступного в CSS используется ключевое слово или словосочетание на английском языке, обозначающее по смыслы тот или ной курсор, например курсор контекстного меню.
.element {
cursor: context-menu;
}
Ниже представлен полный список значения CSS свойства 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
|
![]() |
![]() |
Обратите внимание, что браузеры на мобильных устройствах не поддерживают свойствоclick
работает не корректно если у элемента нет свойстваcursor: pointer
.
Собственный курсор из файла
В css предусмотрена возможность создания собственного курсора из файла. Для этого подойдут как обычные .png файлы, так и специальные .cur. Я воспользовался сервисом CustomCursor и скачал пару забавных мемных курсора с котиками.
.corsor_demo_area {
background-color: #F0F0F0;
border: 1px solid #212631;
cursor: url('/upload/demo/725/meme-pop-cat-cursor.png') 4 1, pointer;
padding: 50px;
}
.corsor_demo_area_hover {
border: 1px solid #212631;
background-color: #BEBEBE;
cursor: url('/upload/demo/725/meme-pop-cat-pointer.png') 4 1, pointer;
padding: 10px;
}
пример работы:
Курсор при наведении
Кроссбраузерность
Из-за того, что у браузеров разная поддержка форматов фалов курсора:
- Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI.
- Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
cursor
имеется возможность указать несколько курсоров одновременно, при этом браузер сам определит какой из указанных форматов он способен отобразить. Оттуда и будет взято значение свойства. Пример:
.element {
cursor: url('cursor.png') 4 1, pointer;
cursor: url('cursor.cur') 4 1, pointer;
}
И так, мы разобрались как влиять на внешний вид курсора средствами CSS, это позволит вам сделать ваши сайту более интерактивными. Удачи!