Содержание
CSS свойство cursor
Свойство cursor используется для установления формы курсора мыши, когда указатель мыши находится в пределах элемента.
Свойство расширения -webkit- добавляется, чтобы отобразить некоторые значения для Safari, Google Chrome и Opera (новые версии).
| Значение по умолчанию | auto |
| Применяется | Ко всем элементам. |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | CSS2 |
| DOM синтаксис | object.style.cursor = «cell»; |
Синтаксис
cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbingПример
html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .auto < cursor: auto; > .help < cursor: help; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 2px solid #666; border-radius: 20px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #eee; > style> head> body> h2>Пример свойства cursor h2> div class="cursor"> div class="auto">auto div> div class="help">help div> div> body> html>Пример со всеми значениями свойства cursor. Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавлено свойство расширения -webkit-:
Пример
html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 2px solid #666; border-radius: 20px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #eee; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Пример свойства cursor h2> p>Наведите курсор мыши на элемент и сами увидите изменения. p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>Значения
| Значение | Описание |
|---|---|
| auto | Браузер сам определяет курсор. Значение по умолчанию. |
| default | Курсор по умолчанию. |
| none | Указывает на отсутствие курсора для элемента. |
| context-menu | Наличие контекстного меню. |
| help | Наличие справочной информации. |
| pointer | Курсор-указатель. |
| progress | Указывает, что программа работает или находится в процессе. |
| wait | Указывает, что нужно дождаться завершения работы программы. |
| cell | Курсор укажет, если будет возможность выбрать ячейки. |
| crosschair | Курсор в виде большого знака “+”. |
| text | Текстовый курсор. |
| URL | Список разделенных запятыми URL к пользовательским курсорам. |
| vertical-text | Курсор указывает на наличие вертикального текста. |
| allias | Курсор указывает, что есть возможность создать псевдоним чего-то. |
| copy | Курсор указывает, что есть возможность копировать что-то. |
| move | Курсор указывает, что есть возможность переместить что-то. |
| no-drop | Курсор указывает, что нельзя перетащить и опустить элемент. |
| not-allowed | Курсор указывает, что невозможно выполнить запрашиваемое действие. |
| all-scroll | Курсор укажет, если будет возможность прокручивания в каком-либо направлении. |
| col-resize | Курсор указывает, что размер колонки может быть изменен по вертикали. |
| row-resize | Курсор указывает, что размер строки может быть изменен по вертикали. |
| n-resize | Курсор указывает, что размер блока может быть растянут вверх. |
| s-resize | Курсор указывает, что размер блока может быть растянут вниз. |
| e-resize | Курсор указывает, что размер блока может быть растянут вправо. |
| w-resize | Курсор указывает, что размер блока может быть растянут влево. |
| ns-resize | Курсор указывает на двунаправленное изменение размера курсора. |
| ew-resize | Курсор указывает на двунаправленное изменение размера курсора. |
| ne-resize | Курсор указывает, что размер блока может быть растянут вверх и вправо. |
| nw-resize | Курсор указывает, что размер блока может быть растянут вверх и влево. |
| se-resize | Курсор указывает, что размер блока может быть растянут вниз и вправо. |
| sw-resize | Курсор указывает, что размер блока может быть растянут вниз и влево. |
| nesw-resize | Курсор указывает на двунаправленное изменение размера курсора. |
| nwse-resize | Курсор указывает на двунаправленное изменение размера курсора. |
| zoom-in | Курсор указывает, что можно увеличить размер элемента. |
| zoom-out | Курсор указывает что можно уменьшить размер элемента. |
| grab | Курсор указывает на захват чего-то. |
| grabbing | Курсор указывает на захват чего-то. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
CSS cursor Property
The cursor property specifies the mouse cursor to be displayed when pointing over an element.
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.cursor=»crosshair» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
| Value | Description | Demo |
|---|---|---|
| alias | The cursor indicates an alias of something is to be created | Play it » |
| all-scroll | The cursor indicates that something can be scrolled in any direction | Play it » |
| auto | Default. The browser sets a cursor | Play it » |
| cell | The cursor indicates that a cell (or set of cells) may be selected | Play it » |
| col-resize | The cursor indicates that the column can be resized horizontally | Play it » |
| context-menu | The cursor indicates that a context-menu is available | Play it » |
| copy | The cursor indicates something is to be copied | Play it » |
| crosshair | The cursor render as a crosshair | Play it » |
| default | The default cursor | Play it » |
| e-resize | The cursor indicates that an edge of a box is to be moved right (east) | Play it » |
| ew-resize | Indicates a bidirectional resize cursor | Play it » |
| grab | The cursor indicates that something can be grabbed | Play it » |
| grabbing | The cursor indicates that something can be grabbed | Play it » |
| help | The cursor indicates that help is available | Play it » |
| move | The cursor indicates something is to be moved | Play it » |
| n-resize | The cursor indicates that an edge of a box is to be moved up (north) | Play it » |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) | Play it » |
| nesw-resize | Indicates a bidirectional resize cursor | Play it » |
| ns-resize | Indicates a bidirectional resize cursor | Play it » |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) | Play it » |
| nwse-resize | Indicates a bidirectional resize cursor | Play it » |
| no-drop | The cursor indicates that the dragged item cannot be dropped here | Play it » |
| none | No cursor is rendered for the element | Play it » |
| not-allowed | The cursor indicates that the requested action will not be executed | Play it » |
| pointer | The cursor is a pointer and indicates a link | Play it » |
| progress | The cursor indicates that the program is busy (in progress) | Play it » |
| row-resize | The cursor indicates that the row can be resized vertically | Play it » |
| s-resize | The cursor indicates that an edge of a box is to be moved down (south) | Play it » |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) | Play it » |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) | Play it » |
| text | The cursor indicates text that may be selected | Play it » |
| URL | A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used | Play it » |
| vertical-text | The cursor indicates vertical-text that may be selected | Play it » |
| w-resize | The cursor indicates that an edge of a box is to be moved left (west) | Play it » |
| wait | The cursor indicates that the program is busy | Play it » |
| zoom-in | The cursor indicates that something can be zoomed in | Play it » |
| zoom-out | The cursor indicates that something can be zoomed out | Play it » |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Курсоры в CSS
За вид курсора отвечает CSS свойство « cursor ». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.
Стандартные курсоры
Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:
Полный список значений cursor
| Значение | Windows | MacOS | Описание |
|---|---|---|---|
| auto | Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента | ||
| default |  |  | Основной курсор |
| none | – | – | Курсор не отображается |
| context-menu |  |  | Доступно контекстное меню |
| help |  |  | Доступна вспомогательная информация |
| pointer |  |  | Указатель, обозначающий ссылку |
| progress |  |  | Программа занята, но пользователь может взаимодействовать с интерфейсом |
| wait |  |  | Программа занята |
| cell |  |  | Указывает на возможность выбора клетки таблицы |
| crosshair |  |  | Крестик, часто используемый для обозначения выбора на битовой карте |
| text |  |  | Значок выбора текста |
| vertical-text |  |  | Значок выбора вертикального текста |
| alias |  |  | Будет создана ссылка внутри страницы |
| 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-in |  |  | Приближение или уменьшение |
| zoom-out |  |  | |
| grab |  |  | Указывает на возможность схватить и переместить объект |
| grabbing |  |  |
Браузеры на мобильных устройствах не поддерживают свойство cursor , но при этом в jQuery событие clik не сработает если у элемента нет свойства cursor: pointer .
Установка своего курсора
Все браузеры дают возможность установить элементу свой курсор из файла по URL, например:
Вторым параметром задаются координаты активной точки, в которой регистрируется нажатие мыши. По умолчанию это левый верхний угол (0,0).