Tel: +372 5596 5762
e-mail: info@digipo.eu

Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка, то есть когда пользователь наведет курсор на такой элемент он поменяет свой вид.
Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в формате cur, ani или svg.

 

Стандартные курсоры.
Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно "руки", если на некий текст, то курсор становится вида "работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид "стрелка".

Значения для свойства cursor:

auto - курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)

crosshair- перекрестие

default- встроенный(основной)

e-resize- стрелка на "восток"

hand- указатель аналогия pointer

help- помощь

move- перемещение

n-resize- переместить на "север"

ne-resize- переместить на "северо-восток"

nw-resize- переместить на "северо-запад"

pointer- указатель

progress- продолжение операции

s-resize- переместить на "юг"

se-resize- переместить на "юго-восток"

sw-resize- переместить на "юго-запад"

text- текст

w-resize- переместить на "запад"

wait- ожидание

 

Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:

all-scroll - переместить во все стороны

col-resize- переместить по горизонтали

no-drop- указатель "нет доступа"

not-allowed- нет доступа

row-resize- переместить по вертикали

vertical-text- вертикальный текст

Следует понимать, что данные значения являются, не каким либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя.
Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор в Вашем браузере.

Пример CSS:

div.cursor {cursor: wait; padding: 5px; background-color: #c0e4ff; border: 2px solid #008000; height: 20px; width: 85px;}
p {width: 150px; text-align: center; cursor: help; background-color: #c5ffa0; border: 2px solid #008000;}

Пример HTML:

<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="cursor">
Ожидание..</div>
<p>Кнопка "помощь"</p>
</div>
</body>
</html>

Визуальный пример:

Ожидание..

Кнопка "помощь"


Пользовательские курсоры.
Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение: url("путь к курсору").

Например: div { cursor : url("my.cur"); }

Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить первый из перечисленных, если у него это не получится, возьмется за второй.. и т. д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются, начиная с IE6, Firefox 1.5. Однако Firefox 1.5 не поддерживает формат ani, а IE6 в свою очередь, не понимает формат svg.

Поэтому список курсоров составляют из файлов разных форматов.. например, так:
div { cursor : url("my.cur"), url("my.svg"); }

И уж что б совсем обезопасить себя в конце списка рекомендуется ставить один из курсоров из стандартного набора.
Вот так: div { cursor : url("my.cur"), url("my.svg"), help; } 

 

Задание

Создайте документ с измененным курсором при наведение на текст, используйте в документе три вида курсора.

В предыдущем уроке рассматривали высоту и ширину

В следующем уроке рассмотрим Float (всплывающие элементы)