Свойство cursor задает вид курсора при наведении мыши на элемент.
Это свойство применимо ко всем элементам.
Значение свойства cursor
| Значение | Вид курсора. Наведите указатель | Описание |
| auto | Авто | Вид курсора зависит от браузера. |
| default | По умолчанию | Курсор по умолчанию - Стрелка. |
| crosshair | Плюс | Курсор в виде знака «+». |
| help | Справка | Курсор в виде стрелки со знаком вопроса. Справка, помощь. |
| move | Перемещение | Курсор для перемещения объектов. |
| pointer | Рука | Курсор в виде руки. Указатель. |
| progress | Жди | Курсор в виде стрелки с песочными часами. Ожидание. |
| text | Текст | Курсор в виде прописной «i». Текстовый курсор. |
| wait | Терпение | Курсор в виде песочных часов. Ожидание. |
| n-resize или s-resize | Норд-Зюйд | Курсор в виде двойной стрелки. Условное направление: север-юг. |
| w-resize или e-resize | Вест-Ост | Курсор в виде двойной стрелки. Условное направление: запад-восток. |
| nw-resize или se-resize | Северо-запад- Юго-восток |
Курсор в виде двойной стрелки. Условное направление: северо-запад-юго-восток. |
| ne-resize или sw-resize | Север-восток- Юго-запад |
Курсор в виде двойной стрелки. Условное направление: северо-восток-юго-запад. |
- auto - вид курсора зависит от браузера.
- url - возможность задания своего курсора. Указывается путь к файлу с курсором (в формате cur или ani).
Через запятую можно указать несколько url файлов с нестандартными курсорами, а в конце желательно добавить одно из значений, приведенных в таблице. И если браузер не сможет отобразить ни один из уникальных курсоров, то будет установлен указанный Вами стандартный курсор.
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- auto
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство cursor </title>
<style type="text/css">
.cursor{cursor: url("img/hand.ani"), url("img/Strelka.cur"), auto;}
</style>
</head>
<body>
<p style="cursor:pointer"> Установлен курсор-рука. </p>
<p class="cursor"> Установим свой курсор! Наведите на этот абзац курсор - он изменится на один из указанных! </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство cursor </title>
<style type="text/css">
.cursor{cursor: url("img/hand.ani"), url("img/Strelka.cur"), auto;}
</style>
</head>
<body>
<p style="cursor:pointer"> Установлен курсор-рука. </p>
<p class="cursor"> Установим свой курсор! Наведите на этот абзац курсор - он изменится на один из указанных! </p>
</body>
</html>
Результат
