Обычно браузеры отображают указатель мыши над любой пустой частью веб-страницы, руку в перчатке над любым связанным или активным элементом и курсор редактирования над любым текстом или текстовым полем. С помощью CSS вы можете переопределить эти свойства для отображения различных курсоров.
h1 {
cursor: move;
}
p {
cursor: text;
}
В приведенной ниже таблице показаны разные курсоры, которые используются большинством браузеров.
Значение | Вид | Описание |
---|---|---|
Общее | ||
auto |
Браузер определяет курсор для отображения на основе текущего контекста. Это значение установлено по умолчанию. | |
default |
![]() |
Курсор по умолчанию без учета контекста, обычно стрелка. |
none |
Курсор не отображается. | |
initial |
Устанавливает это свойство в значение по умолчанию. | |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента cursor . |
|
Links & status Cursors | ||
context-menu |
![]() |
Указывает, что доступно контекстное меню. |
help |
![]() |
Указывает, что доступен текст с подсказкой. |
pointer |
![]() |
Курсор, который указывает на ссылку, обычно указательным пальцем. |
progress |
![]() |
Индикатор прогресса. Программа выполняет некоторую обработку, но пользователь все еще может взаимодействовать с интерфейсом (в отличие от wait ). |
wait |
![]() |
Указывает, что программа занята, и пользователь должен подождать. |
Курсоры выбора | ||
cell |
![]() |
Указывает, что ячейка (или набор ячеек) может быть выбран. |
crosshair |
![]() |
Простое перекрестие. Часто используется для обозначения выделения в растровом изображении. |
text |
![]() |
Указывает текст, который может быть выбран, как правило, в виде двутавровой балки. |
vertical-text |
![]() |
Указывает, что вертикальный текст может быть выбран, как правило, в виде поперечной двутавровой балки. |
Drag and Drop курсоры | ||
alias |
![]() |
Указывает, что псевдоним (alias) или ярлык (shortcut) должен быть создан. |
copy |
![]() |
Указывает, что что-то может быть скопировано. |
move |
![]() |
Указывает, что находящийся объект может быть перемещен. |
no-drop |
![]() |
Указывает, что перетаскиваемый элемент не может быть выброшен в текущем местоположении. |
not-allowed |
![]() |
Указывает, что что-то не может быть сделано. |
Курсоры для ресайза или скролла | ||
all-scroll |
![]() |
Указывает, что что-то можно прокрутить в любом направлении (панорама). |
col-resize |
![]() |
Указывает, что размер столбца можно изменить по горизонтали. |
row-resize |
![]() |
Указывает, что размер строки можно изменить по вертикали. |
n-resize |
![]() |
Указывает, что грань может быть перемещена вверх (на север). |
e-resize |
![]() |
Указывает, что грань может быть перемещена вправо (восток). |
s-resize |
![]() |
Указывает, что грань может быть перемещена вниз (на юг). |
w-resize |
![]() |
Указывает, что грань может быть перемещена влево (запад). |
ne-resize |
![]() |
Указывает, что грань может быть перемещена вверх-вправо (северо-восток). |
nw-resize |
![]() |
Указывает, что грань может быть перемещена вверх-влево (северо-запад). |
se-resize |
![]() |
Указывает, что грань может быть перемещена вниз-вправо (юго-восток). |
sw-resize |
![]() |
Указывает, что грань может быть перемещена вниз-влево (юго-запад). |
ew-resize |
![]() |
Указывает двунаправленный курсор изменения размера. |
ns-resize |
![]() |
|
nesw-resize |
![]() |
|
nwse-resize |
![]() |
|
Zoom и Grab курсоры | ||
zoom-in |
![]() |
Указывает, что что-то может быть увеличено. |
zoom-out |
![]() |
Указывает, что что-то можно уменьшить. |
grab |
![]() |
Указывает, что что-то может быть захвачено (перетащено для перемещения). |
grabbing |
![]() |
Указывает, что что-то схвачено. |
Создание индивидуального курсора
Вы можете переопределить свой курсор в браузере.
Свойство cursor
может содержать разделенный запятыми список пользовательских значений курсора, за которыми должно следовать значение по умолчанию (generic cursor).
Если первое значение cursor
указано неправильно или файл не может быть найден, будет использоваться следующий курсор в списке пока не будет найден доступный курсор для отображения.
Если ни один из пользовательских курсоров не найден или не поддерживается браузером, вместо него будет использоваться курсор по умолчанию.
Стандартным форматом, который можно использовать для курсоров, является формат .cur
. Вы можете конвертировать изображения, такие как .jpg
и .gif
, в формат .cur
с помощью любого софта для конвертации изображений.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}
В приведенном выше примере custom.gif
и custom.cur
— это файл пользовательского курсора, загруженный на сервер, а по умолчанию установлен default
— это курсор, который будет использоваться, если пользовательский курсор отсутствует или не поддерживается браузером клиента.
Ниже демонстрация пользовательского курсора.
Наведите указатель мыши на эту ссылку, чтобы посмотреть пользовательский курсор
IE9 и более ранние версии поддерживают только значения URL типа .cur
для статического курсора и .ani
для анимированного курсора. Однако такие браузеры, как Firefox, Chrome и Safari, поддерживают .cur
, .png
, .gif
и .jpg
но не .ani
.
Если вы объявляете пользовательский курсор, вы должны определить общий курсор в конце списка, иначе пользовательский курсор не будет отображаться правильно.