Виды курсора в CSS

Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Вид курсора устанавливает свойство cursor. В таблице перечислены значения этого свойства и соответствующие им виды курсора:

Значение свойства	Вид курсора
default
text
pointer
help
move
nw-resize se-resize
ne-resize sw-resize
e-resize w-resize
n-resize s-resize
crosshair
progress
wait

Для некоторых видов указателя мыши существуют по два значения. Использовать можно любое. В некоторых браузерах эти курсоры выглядят по-разному.

Кроме того, есть такие значения:

cursor: auto - указатель мыши будет такой, какой и должен быть

cursor: inherit - значение принимается от родительского элемента

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

Создадим блок и установим для него вид указателя мыши - pointer. Это показывает пользователю, что на элемент можно нажать.

<div style="border: 1px solid Red; cursor: pointer">Блок</div>

Курсор в виде картинки

В качестве указателя мыши можно использовать картинку. Для этого в свойстве cursor нужно указать путь к файлу изображения. Каждый браузер поддерживает свой набор форматов для курсора. Самый распространённый формат - cur. Он работает в большинстве браузеров. Можно указать несколько файлов через запятую. Если первый файл не поддерживается, то будет использован второй. Если и он не может применяться, то берётся третий, и так далее. Также желательно указать стандартный вид курсора. Он используется, если ни один из файлов не подойдёт.

Для примера вы можете взять картинку, которая есть на данном сайте. Её нужно распаковать и поместить в папку, где находится страница.

Скачать

Добавим ещё один блок и используем эту картинку для курсора.

<div style="cursor: url('arrow.cur'), url('arrow.png'), pointer">Блок</div>

Файла в формате PNG в нашем примере нет. Я написал его для того, чтобы показать, как указывается несколько файлов. Запустите страницу и посмотрите, как на этом блоке выглядит курсор.