smsc banner 468x60smsc banner 728x90smsc banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

Обычно браузеры отображают указатель мыши над любой пустой частью веб-страницы, руку в перчатке над любым связанным или активным элементом и курсор редактирования над любым текстом или текстовым полем. С помощью CSS вы можете переопределить эти свойства для отображения различных курсоров.

h1 {
    cursor: move;
}
p {
    cursor: text;
}

В приведенной ниже таблице показаны разные курсоры, которые используются большинством браузеров.

Значение Вид Описание
Общее
auto   Браузер определяет курсор для отображения на основе текущего контекста. Это значение установлено по умолчанию.
default Default Cursor Курсор по умолчанию без учета контекста, обычно стрелка.
none   Курсор не отображается.
initial Устанавливает это свойство в значение по умолчанию.
inherit  Если указан, связанный элемент принимает вычисленное значение своего родительского элемента cursor.
Links & status Cursors
context-menu Context-menu Cursor Указывает, что доступно контекстное меню.
help Help Cursor Указывает, что доступен текст с подсказкой.
pointer Pointer Cursor Курсор, который указывает на ссылку, обычно указательным пальцем.
progress Progress Cursor Индикатор прогресса. Программа выполняет некоторую обработку, но пользователь все еще может взаимодействовать с интерфейсом (в отличие от wait).
wait Wait Cursor Указывает, что программа занята, и пользователь должен подождать.
Курсоры выбора
cell Cell Cursor Указывает, что ячейка (или набор ячеек) может быть выбран.
crosshair Crosshair Cursor Простое перекрестие. Часто используется для обозначения выделения в растровом изображении.
text Text Cursor Указывает текст, который может быть выбран, как правило, в виде двутавровой балки.
vertical-text Vertical-text Cursor Указывает, что вертикальный текст может быть выбран, как правило, в виде поперечной двутавровой балки.
Drag and Drop курсоры
alias Alias Cursor Указывает, что псевдоним (alias) или ярлык (shortcut) должен быть создан.
copy Copy Cursor Указывает, что что-то может быть скопировано.
move Move Cursor Указывает, что находящийся объект может быть перемещен.
no-drop No-drop Cursor Указывает, что перетаскиваемый элемент не может быть выброшен в текущем местоположении.
not-allowed Not-allowed Cursor Указывает, что что-то не может быть сделано.
Курсоры для ресайза или скролла
all-scroll All-scroll Cursor Указывает, что что-то можно прокрутить в любом направлении (панорама).
col-resize Col-resize Cursor Указывает, что размер столбца можно изменить по горизонтали.
row-resize Row-resize Cursor Указывает, что размер строки можно изменить по вертикали.
n-resize N-resize CursorУказывает, что грань может быть перемещена вверх (на север).
e-resize E-resize CursorУказывает, что грань может быть перемещена вправо (восток).
s-resize S-resize CursorУказывает, что грань может быть перемещена вниз (на юг).
w-resize W-resize CursorУказывает, что грань может быть перемещена влево (запад).
ne-resize NE-resize CursorУказывает, что грань может быть перемещена вверх-вправо (северо-восток).
nw-resize NW-resize CursorУказывает, что грань может быть перемещена вверх-влево (северо-запад).
se-resize SE-resize CursorУказывает, что грань может быть перемещена вниз-вправо (юго-восток).
sw-resize SW-resize CursorУказывает, что грань может быть перемещена вниз-влево (юго-запад).
ew-resize EW-resize CursorУказывает двунаправленный курсор изменения размера.
ns-resize NS-resize Cursor
nesw-resize NESW-resize Cursor
nwse-resize NWSE-resize Cursor
Zoom и Grab курсоры
zoom-in Zoom-in Cursor Указывает, что что-то может быть увеличено.
zoom-out Zoom-out Cursor Указывает, что что-то можно уменьшить.
grab Grab Cursor Указывает, что что-то может быть захвачено (перетащено для перемещения).
grabbing Grabbing Cursor Указывает, что что-то схвачено.

Создание индивидуального курсора

Вы можете переопределить свой курсор в браузере.

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

Если вы объявляете пользовательский курсор, вы должны определить общий курсор в конце списка, иначе пользовательский курсор не будет отображаться правильно.

etxt banner 480x320etxt banner 728x90etxt banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…