cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url(‘путь к курсору’),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Значения
url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.
Остальные допустимые значения приведены в табл. 1.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
| default | P | ||
 |
crosshair | P | |
 |
help | P | |
 |
move | P | |
 |
pointer | P | |
 |
progress | P | |
 |
text | P | |
 |
wait | P | |
 |
n-resize | P | |
 |
ne-resize | P | |
 |
e-resize | P | |
| se-resize | P | ||
 |
s-resize | P | |
 |
sw-resize | P | |
 |
w-resize | P | |
 |
nw-resize | P |
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .
Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.
HTML5 CSS2.1 IE Cr Op Sa Fx
cursor .cross < cursor: crosshair; >.help
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства cursor
HTML5 CSS2.1 IE Cr Op Sa Fx
cursor Обычный текст
Ссылка 1 Ссылка 2 Ссылка 3
Объектная модель
[window.]document.getElementById(» elementID «).style.cursor
Браузеры
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Opera не работает с файлами курсора.
cursor
С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.
Пример
Скопировать ссылку «Пример» Скопировано
Пусть будет обычный блок статьи:
Какая-то статья
Многие кометы имеют два хвоста, однако солнечное затмение однократно. Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже знаем, полнолуние непрерывно.article> h2>Какая-то статьяh2> div> p> Многие кометы имеют два хвоста, однако солнечное затмение однократно. Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже знаем, полнолуние непрерывно. p> div> article>
Пусть при наведении курсора на блок статьи показывается смайлик с котиком:
article cursor: url(cat.png) 2 2, default;>article cursor: url(cat.png) 2 2, default; >
Спойлер: может не работать в Google Chrome. Лучше смотреть в Firefox или Safari.
Если навести курсор на блок статьи, то увидите картинку котика вместо привычной стрелочки.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Есть набор стандартизированных значений:
- auto — браузер сам решит какой курсор показывать в зависимости от того, на какой элемент он наведён. Например, для ссылки это будет рука с пальчиком, для поля ввода чёрточка, а для обычного блока — стандартная стрелка.
- default — обычная, привычная стрелочка.
- none — курсора совсем нет.
- pointer — курсор, который обычно появляется над нажимаемыми элементами типа ссылок.
- text — курсор в виде чёрточки с засечками сверху и снизу. Обычно показывается там, где текст может быть выбран, выделен.
- Остальные, менее популярные значения:
- context — menu — курсор контекстного меню (обычно вызывается правой кнопкой мыши).
- help — доступен вспомогательный информационный контент.
- progress — программа в фоне выполняет какие-то действия, но пользователь всё ещё может с ней взаимодействовать.
- wait — программа не отвечает, занята обработкой какой-то операции.
- cell — можно выбрать одну или несколько ячеек таблицы.
- crosshair — курсор-крестик, обычно используется, чтобы показать, что на изображении можно выбрать какую-то область.
- vertical — text — практически как text , но вертикально.
- alias — загнутая стрелочка, так обозначают ссылки, клик по которым уведёт с текущего сайта.
- copy — содержимое можно скопировать.
- move — содержимое можно подвигать.
- no — drop — в эту область нельзя перетащить файл.
- not — allowed — действие не будет выполнено.
- grab — содержимое можно схватить, чтобы перетащить.
- grabbing — содержимое было схвачено для перетаскивания.
- all — scroll — содержимое может быть проскроллено в любом направлении.
- col — resize — колонку / ячейку таблицы можно изменить в размерах по горизонтали.
- row — resize — строку в таблице или другой элемент можно изменить в размерах по вертикали.
- zoom — in — содержимое можно приблизить, увеличить.
- zoom — out — содержимое можно отдалить, уменьшить.
Демо со всеми перечисленными курсорами:
Внешне курсоры могут отличаться в разных операционных системах.
Кроме значений, заданных при помощи ключевых слов, можно указывать ссылку на картинку, которая будет показана вместо курсора.
selector cursor: url(cat.png), auto;>selector cursor: url(cat.png), auto; >Если вы решили сделать кастомный курсор, то обязательно укажите через запятую одно из стандартных значений. Это нужно на случай, если браузер не смог загрузить или отобразить картинку. Тогда будет показан тот курсор, который вы указали в конце значения.
Можно указывать несколько картинок подряд. Будет показана первая из доступных.
selector cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;>selector cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer; >Для каждой из картинок можно после закрывающей круглой скобки указать позицию курсора-картинки.
selector cursor: url(cat.png) 2 2, auto;>selector cursor: url(cat.png) 2 2, auto; >В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.
Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.
Как понять
Скопировать ссылку «Как понять» Скопировано
На экране курсор заменяет нам руки. Мы выполняем большую часть операций на компьютере при помощи мыши, её курсора: кликаем на кнопки, ставим курсор в поля ввода, выделяем текст, перетаскиваем элементы интерфейса и так далее.
Обычно на простых сайтах нужны всего два значения: pointer и default . Поскольку контент там во многом состоит из текста и ссылок / кнопок.
Если у вас сервис или сложная система управления, в которой есть больше вариантов взаимодействия с интерфейсом, чем просто на что-то нажать или что-то выделить, то отнеситесь внимательно к подбору правильных курсоров для каждого из интерактивных элементов. Именно по изменению внешнего вида курсора пользователь будет понимать, как именно взаимодействовать с элементом.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если используете картинку вместо курсора, то используйте небольшое изображение, поскольку нельзя явно указать размеры отображаемого курсора. Лучше не злоупотреблять, чтобы не перекрыть часть контента на странице.
�� Пользователь привык целиться в то, на что хочет нажать кончиком курсора. Если вы сильно сдвинете картинку относительно этого самого кончика, то пользователь может не попасть в область клика.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor : pointer , чтобы пользователь точно понял, что с элементом можно взаимодействовать.
cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Краткая информация
Значение по умолчанию auto Наследуется Да Применяется Ко всем элементам Анимируется Нет Синтаксис
cursor: [url('адрес'),] | [ ]Синтаксис
Описание Пример Указывает тип значения. A && B Значения должны выводиться в указанном порядке. && A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count [ ] Группирует значения. [ crop || cross ] * Повторять ноль или больше раз. [,]* + Повторять один или больше раз. + ? Указанный тип, слово или группа не является обязательным. inset? Повторять не менее A, но не более B раз. # Повторять один или больше раз через запятую. # Значения
url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. none Отключает отображение курсора.
Остальные допустимые значения приведены в табл. 1. Чтобы увидеть как курсор выглядит в реальности, наведите на колонку Тест.
Табл. 1. Вид курсора
Вид Значение Тест Пример Примечание 
default P 
context-menu P Отображается только в IE10+. 
help P 
pointer P 
progress P 
wait P 
cell P 
crosshair P 
text P 
vertical-text P 
alias P 
copy P 
move P 
no-drop P Все браузеры, кроме IE, отображают как not-allowed . 
not-allowed P 
all-scroll P 
col-resize P 
row-resize P 
n-resize P 
ne-resize P 
e-resize P 
se-resize P 
s-resize P 
sw-resize P 
w-resize P 
nw-resize P 
nesw-resize P 
nwse-resize P 
zoom-in P IE не поддерживает. 
zoom-out P IE не поддерживает. 
grab P Chrome, Opera, Safari поддерживают значение -webkit-grab . IE не поддерживает. 
grabbing P Chrome, Opera, Safari поддерживают значение -webkit-grabbing . IE не поддерживает. В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url(), url(), .
Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.
Пример
Объектная модель
Объект.style.cursor
Примечание
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-zoom-in и -webkit-zoom-out .
Firefox до версии 24 поддерживает значения -moz-zoom-in и -moz-zoom-out .
Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-grab и -webkit-grabbing .
Firefox до версии 27 поддерживает значения -moz-grab и -moz-grabbing .
Браузеры на мобильных устройствах не поддерживают свойство cursor .
Спецификация
Спецификация Статус CSS Basic User Interface Module Level 3 Рабочий проект CSS Level 2 (Revision 1) Рекомендация Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize 4 12 1 7 1.2 1 pointer, progress 6 12 1 7 1.2 1 url() 6 12 1 15 3 1.5 not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize 6 12 1 10.6 3 1.5 alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu 10 12 1 10.6 3 1.5 none 6 14 5 15 5 3 zoom-in, zoom-out 12 4 36 15 24 3.1 9 2 24 grab, grabbing 12 4 22 15 24 4 9 1.5 27 2.1 1 9.5 3 Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-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-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-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
cursor¶
Свойство cursor устанавливает форму курсора, когда он находится в пределах элемента.
Вид курсора зависит от операционной системы и установленных параметров.
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
/* Keyword value */ cursor: auto; cursor: pointer; /* … */ cursor: zoom-out; /* URL with mandatory keyword fallback */ cursor: url(hand.cur), pointer; /* URL and coordinates, with mandatory keyword fallback */ cursor: url(cursor_1.png) 4 12, auto; cursor: url(cursor_2.png) 2 2, pointer; /* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */ cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5, progress; /* Global values */ cursor: inherit; cursor: initial; cursor: revert; cursor: revert-layer; cursor: unset;Значения¶
Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
Вид курсора по умолчанию для текущего элемента.
Отключает отображение курсора.
Остальные допустимые значения приведены в табл. 1.
Табл. 1. Вид курсора
Вид Значение 
default 
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 
ne-resize 
e-resize 
se-resize 
s-resize 
sw-resize 
w-resize 
nw-resize 
nesw-resize 
nwse-resize 
zoom-in 
zoom-out 
grab 
grabbing В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url('путь к курсору1'), url('путь к курсору2'), .Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.
Примечание¶
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-zoom-in и -webkit-zoom-out .
Firefox до версии 24 поддерживает значения -moz-zoom-in и -moz-zoom-out .
Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-grab и -webkit-grabbing .
Firefox до версии 27 поддерживает значения -moz-grab и -moz-grabbing .
Браузеры на мобильных устройствах не поддерживают свойство cursor .
cursor: auto;Применяется ко всем элементам
Спецификации¶
- CSS Basic User Interface Module Level 4
- CSS Basic User Interface Module Level 3
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
Can I Use css3-cursors? Data on support for the css3-cursors feature across the major browsers from caniuse.com.
Can I Use css3-cursors-newer? Data on support for the css3-cursors-newer feature across the major browsers from caniuse.com.
Примеры¶
Пример 1¶
1 2 3 4 5 6 7 8 9 10 11 12
.foo cursor: crosshair; > .bar cursor: zoom-in; > /* A fallback keyword value is required when using a URL */ .baz cursor: url('hyper.cur'), auto; >Пример 2¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
html> head> meta charset="utf-8" /> title>cursortitle> style> .cross cursor: crosshair; > .help cursor: help; > style> head> body> p class="cross"> На этом тексте курсор мыши примет вид перекрестья. p> p> a href="page/help.html" class="help" >СПРАВКА 1a >br /> a href="page/help.html" class="help" >СПРАВКА 2a >br /> a href="page/help.html" class="help" >СПРАВКА 3a > p> body> html>Пример 3¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html> head> meta charset="utf-8" /> title>cursortitle> style> a cursor: url('cursor/sniper.cur'), pointer; > style> head> body> p>Обычный текстp> p> a href="page/1.html">Ссылка 1a> a href="page/2.html">Ссылка 2a> a href="page/3.html">Ссылка 3a> p> body> html>Ссылки¶
- Свойство cursor на сайте MDN