Глава 9. Курсоры
Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка, т.е., когда пользователь наведет курсор на такой элемент, курсор поменяет свой вид.
Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры (файлы в формате cur, ani или svg).
Стандартные курсоры
Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно "руки", если на некий текст, то курсор становится вида "работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид "стрелка".
Для того, чтобы изменить внешний вид курсора, свойству cursor необходимо указать 1 из возможных значений:
Некоторые браузеры поддерживают дополнительные формы курсоров:
Следует понимать, что данные значения являются не каким-либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя.
Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор в браузере.
Провели? А теперь зайдите в Пуск - Панель управления - Схема - Указатели - Мышь и выберите любую другую схему. Теперь можете снова провести по списку выше, чтобы увидеть, как теперь выглядят курсоры.
Пример:
<title>Стандартные курсоры</title>
<div style='cursor:wait;padding:8px;background:#c0e;height:88px;width:88px'>
Буду думать.
<p style=width:88px;text-align:center;cursor:help;background:#c5f>Кнопка.
</div>
Пользовательские курсоры
Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение:url("путь к курсору").
Например:
div{cursor:url(my.cur)}
Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить 1-й из перечисленных, если у него это не получится, возьмется за 2-й. и т.д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются, начиная с IE6, Firefox 1.5. Однако Firefox 1.5 не поддерживает формат ani, а IE6 в свою очередь, не понимает формат svg.
Поэтому список курсоров составляют из файлов разных форматов. например, так:
div{cursor:url(my.cur),url(my.svg)}
И уж чтобы совсем обезопасить себя в конце списка рекомендуется ставить 1 из курсоров из стандартного набора.
Вот так:
div{cursor:url(my.cur),url("my.svg"),help}
Пример:
<style>div{cursor:url(cursors/my.ani),crosshair;width:200px;padding:8px;background:#c5f;border:2px solid #008}</style>
<title>Пользовательские курсоры</title>
<div>
Если, нацелив курсор на этот блок вместо навороченного курсора, Вы видите обыкновенное перекрестие, значит браузер не поддерживает формат ani.
</div>
Свойство cursor имеет еще 1 значение - inherit, которое говорит о том, что свойство наследуется от элемента-родителя.
