базовый курс

ГРУППА КУРСА

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

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

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

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

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

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

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

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

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

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<div style="border: 1px solid Red; cursor: pointer">Блок</div>

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

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

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

Скачать

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

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

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