Свойство 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; }
Задание
Создайте документ с измененным курсором при наведение на текст, используйте в документе три вида курсора.
