Внешний вид курсора, когда он проходит над полем.
Курсоры зависят от операционной системы и могут выглядеть совершенно по-разному на разных компьютерах.
Возможные значения
Наведите курсор на строку, если вы управляете курсором, чтобы увидеть, как ваша вычислительная машина отображает каждый курсор.
Общего назначения
auto
Значение: auto.
Описание: изменяется в зависимости от ситуации. Значение по умолчанию.
default
Значение: default.
Описание: курсор платформы по умолчанию. Обычно это стрелка.
none
Значение: none.
Описание: курсора нет. Удивительно.
Ссылки и статус
pointer
Значение: pointer.
Описание: указывает на ссылку. Обычно указывающая рука.
help
Значение: help.
Описание: указывает, что для объекта, на который наводится курсор, есть справка. Обычно это вопросительный знак.
progress
Значение: progress.
Описание: указывает, что программа что-то обрабатывает, но с этим все ещё можно взаимодействовать. Обычно стрелка в сочетании с таймером.
wait
Значение: wait.
Описание: указывает, что пользователь должен подождать, пока программа занята. Обычно используется таймер.
context-menu
Значение: context-menu.
Описание: указывает, что следует ожидать появления контекстного меню при наведении курсора мыши на объект. Обычно это стрелка с мини-меню.
Выделение
text
Значение: text.
Описание: обозначает текст. Обычно это двутавровая балка.
crosshair
Значение: crosshair.
Описание: тонкий крест, похожий на знак плюс.
cell
Значение: cell.
Описание: указывает на ячейки, похожие на таблицу. Толстый крест, похожий на знак плюс.
vertical-text
Значение: vertical-text.
Описание: удивительно для вертикального текста. Обычно это горизонтальная двутавровая балка.
Изменение размера и прокрутка
n-resize
Значение: n-resize.
Описание: север: указывает на что-то, что можно переместить или изменить в большую сторону. Обычно это стрелка, указывающая вверх.
ne-resize
Значение: ne-resize.
Описание: северо-восток: можно перемещать вверх и вправо. Обычно диагональная стрелка, направленная вправо вверх.
e-resize
Значение: e-resize
Описание: восток: может быть перемещён вправо. Обычно это стрелка, указывающая вправо.
se-resize
Значение: se-resize.
Описание: юго-восток: можно перемещать вниз и вправо. Обычно это диагональная стрелка, направленная вниз и вправо.
s-resize
Значение: s-resize.
Описание: юг: можно перемещать вниз. Обычно это стрелка, указывающая вниз.
sw-resize
Значение: sw-resize.
Описание: юго-запад: можно перемещать вниз и влево. Обычно это диагональная стрелка, направленная вниз и влево.
w-resize
Значение: w-resize.
Описание: запад: может быть перемещён влево. Обычно это стрелка, указывающая влево.
nw-resize
Значение: nw-resize.
Описание: северо-запад: можно перемещать вверх и влево. Обычно диагональная стрелка, указывающая вверх и влево.
ew-resize
Значение: ew-resize.
Описание: восток + запад: два направления: можно перемещать влево или вправо. Обычно это двойная стрелка влево и вправо.
ns-resize
Значение: ns-resize.
Описание: север + юг: два направления: можно перемещать вверх или вниз. Обычно это двойная стрелка вверх и вниз.
nesw-resize
Значение: nesw-resize.
Описание: северо-восток + юго-запад: два направления: можно перемещать вверх и вправо или вниз и влево. Обычно это двойная стрелка вверх-вправо и вниз-влево.
nwse-resize
Значение: nwse-resize.
Описание: северо-запад + юго-восток: два направления: можно перемещать вверх и влево или вниз и вправо. Обычно это двойная стрелка вверх-влево и вниз-вправо.
col-resize
Значение: col-resize.
Описание: элемент или столбец можно изменять по размеру влево или вправо. Обычно это двойная стрелка влево и вправо с полосой посередине.
row-resize
Значение: row-resize.
Описание: размер элемента или строки может быть изменён вверх или вниз. Обычно это двойная стрелка вверх и вниз с полосой посередине.
all-scroll
Значение: all-scroll.
Описание: что-то, что можно прокручивать в любом направлении. Обычно четырёхугольная стрелка, указывающая вверх, вправо, вниз и влево.
Перетаскивание
move
Значение: move.
Описание: что-то можно перемещать. Обычно это четырёхугольная стрелка, указывающая вверх, вправо, вниз и влево.
alias
Значение: alias.
Описание: указывает на потенциальное создание ярлыка. Обычно это изогнутая стрелка.
copy
Значение: copy.
Описание: что-то может быть скопировано. Обычно это стрелка со знаком “+”.
no-drop
Значение: no-drop.
Описание: перетаскиваемое что-то, что не может быть удалено в текущем местоположении. Обычно стрелка рядом с кругом, через который проведена линия.
not-allowed
Значение: not-allowed.
Описание: действие не может быть выполнено. Обычно используется круг с проходящей линией.
grab
Значение: grab.
Описание: что-то, что можно перетащить для перемещения. Обычно это открытая ладонь.
grabbing
Значение: grabbing.
Описание: что-то, что перетаскивается для перемещения. Обычно это закрытая рука.
Масштабирование
zoom-in
Значение: zoom-in.
Описание: указывает на что-то, что можно увеличить. Обычно это увеличительное стекло со знаком “+”.
zoom-out
Значение: zoom-out.
Описание: указывает на что-то, что можно размагнитить. Обычно это увеличительное стекло со знаком “-“.
[URL], [значение]
Значение: [URL], [значение].
Описание: список изображений, разделённых запятыми, которые будут использоваться в качестве пользовательского курсора. Если первое не найдено или несовместимо, браузер перейдёт к следующему в списке. Список должен заканчиваться одним из приведённых выше ключевых слов-значений, чтобы действовать как запасной вариант.
Пример: url(«narwhal.png»), auto
inherit
Значение: inherit.
initial
Значение: initial.
unset
Значение: unset.
Пример
abbr { cursor: help; }Поддержка браузера
Большинство курсоров широко поддерживаются в браузерах для настольных компьютеров (в меньшей степени в мобильных браузерах с сенсорным экраном без курсоров, потому что, ну, очевидно). Однако будьте осторожны с масштабированием и захватом курсоров.
Все свойства CSS
all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index
