CSS курсоры

Для того, чтобы изменить внешний вид стандартного курсора при наведении на элемент страницы, требуется задать классу свойство 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, это позволит вам сделать ваши сайту более интерактивными. Удачи!