Свойство CSS cursor отвечает за вид курсора при наведении. Вообще говоря не стоит злоупотреблять экзотическими курсорами, поскольку это может вызвать лишь отторжение пользователей.
Синтаксис CSS cursor
cursor: value;
Вместо value указывается название курсора или месторасположение картинки. Сначала рассмотрим стандартные курсоры.
Таблица стандартных курсоров
| Вид курсора | Значение (value) |
 |
default |
 |
crosshair |
 |
help |
 |
move |
 |
pointer |
 |
progress |
 |
text |
 |
wait |
 |
n-resize |
 |
ne-resize |
 |
se-resize |
 |
s-resize |
 |
sw-resize |
 |
w-resize |
 |
nw-resize |
Пример с изменением курсора
Приведем пример с различными отображениями курсоров при наведении.
<html> <head> <style> .cursor_wait{ cursor: wait; } .cursor_help cursor: help; } .cursor_progress cursor: progress; } </style> </head> <body> Обычный текст с дефолтным курсором <font class="cursor_wait">Курсор с песочными часами (wait)</font> <font class="cursor_help">Курсор со знаком вопроса (help)</font> <font class="cursor_progress">Загрузка, песочные часы с указательной стрелкой (cursor_progress)</font> </body> </html>
На странице преобразуется в следующее
Курсор с песочными часами (wait)
Курсор со знаком вопроса (help)
Загрузка, песочные часы с указательной стрелкой (cursor_progress)
Как сделать свой курсор
Помимо стандартных курсоров можно подключить свою картинку с курсором. Синтаксис следующий
cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <стандартный курсор>;
Последовательно указывается несколько вариантов пути к курсору. Если не может загрузиться первый вариант, то пробуется загрузиться второй и т.д. Последним указывается значение стандартного курсора (на случай, если ни одна из картинок не загрузилась).
Примечание 1
Рекомендуется использовать специальный формат изображений для курсоров .cur
Примечание 2Opera не работает с изображениями курсоров.
Для обращения к cursor из JavaScript нужно писать следующую конструкцию:
[window.]document.getElementById("elementID").style.cursor="VALUE"
Читайте также:
• Свойство CSS font
• Свойство css display
• Свойство css transform
• Свойство css transform-origin
• Свойство css transition
• Псевдокласс :nth-child
• Свойство css overflow
• Свойство css text-indent
• Все про CSS border
• Все про CSS background
• CSS position