Курсоры в CSS (cursor)

Свойство 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

Примечание 2

Opera не работает с изображениями курсоров.

Для обращения к 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


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.