css властивість cursor
Властивість cursor встановлює вигляд курсора, коли він знаходиться в межах елемента.
Вид курсору залежить від операційної системи і встановлених параметрів.
Властивості cursor можна вказувати нуль або більше значень <url>, розділених комами, а потім одне обов'язкове значення ключового слова. Кожен <url> має вказувати на файл зображення. Браузер спробує завантажити перше зазначене зображення, якщо він не зможе повернутися до наступного, і повернутися до значення ключового слова, якщо зображення не може бути завантажене (або якщо нічого не вказано).
До кожного <url> може необов'язково дописуватися пара номерів, розділених пробілами, які позначають координати <x> та <y>. Вони встановлюють точку доступу курсору, щодо верхнього лівого кута зображення.
| Значення | Тест | Приклад |
|---|---|---|
| default | td {cursor: default} | |
| context-menu | td {cursor: context-menu} | |
| help | td {cursor: help} | |
| tdointer | td {cursor: pointer} | |
| tdrogress | td {cursor: progress} | |
| wait | td {cursor: wait} | |
| cell | td {cursor: cell} | |
| crosshair | td {cursor: crosshair} | |
| text | td {cursor: text} | |
| vertical-text | td {cursor: vertical-text} | |
| alias | td {cursor: alias} | |
| copy | td {cursor: copy} | |
| move | td {cursor: move} | |
| no-drop | td {cursor: no-drop} | |
| not-allowed | td {cursor: not-allowed} | |
| all-scroll | td {cursor: all-scroll} | |
| col-resize | td {cursor: col-resize} | |
| row-resize | td {cursor: row-resize} | |
| n-resize | td {cursor: n-resize} | |
| ne-resize | td {cursor: ne-resize} | |
| e-resize | td {cursor: e-resize} | |
| se-resize | td {cursor: se-resize} | |
| s-resize | td {cursor: s-resize} | |
| sw-resize | td {cursor: sw-resize} | |
| w-resize | td {cursor: w-resize} | |
| nw-resize | td {cursor: nw-resize} | |
| nesw-resize | td {cursor: nesw-resize} | |
| nwse-resize | td {cursor: nwse-resize} | |
| zoom-in | td {cursor: zoom-in} | |
| zoom-out | td {cursor: zoom-out} | |
| grab | td {cursor: grab} | |
| grabbing | td {cursor: grabbing} |
Синтаксис
cursor: value;Властивість cursor може отримувати 36 значень:
defaultКурсор без задання (системний)
context-menuКурсор вказує на те, що контекстне мен доступне. Відображається лише в IE10 +
helpКурсор вказує на те, що допомога доступна
pointerКурсор є покажчиком і вказує на зв'язок
progressКурсор вказує на те, що програма зайнята (в процесі)
waitКурсор вказує на те, що програма зайнята
cellКурсор вказує на те, що комірка (або набір комірок), можуть бути виділені
crosshairКурсор відображається як перехрестя
textКурсор вказує текст, який може бути виділений
vertical-textКурсор вказує вертикальний текст, який може бути виділений
aliasКурсор вказує, що ім`я чого-небудь повинно бути створено
copyКурсор вказує те, що щось може бути скопійоване
moveКурсор вказує те, що щось може бути переміщено
no-dropКурсор вказує на те, що зміщаємий елемент не може бути зоставлений тут. Всі браузери, крім IE, відображають як not-allowed
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Курсор вказує на те, що щось може бути збільшено. IE не підтримує
zoom-outКурсор вказує на те, що щось може бути збільшено. IE не Курсор вказує на те, що щось може бути зменьшено. IE не підтримує
grabКурсор вказує на те, що щось може бути захоплено. Chrome, Opera, Safari підтримують значення -webkit-grabbing. IE не підтримує
grabbingКурсор вказує на те, що щось може бути захоплено. Chrome, Opera, Safari підтримують значення -webkit-grabbing. IE не підтримує
autoЗначення без задання. Браузер самостійно встановлює курсор
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
urlВстановлює картинку замість стандартного курсору. Дозволено вказувати декілька курсорів, розділюйте їх комами, останнім в списку вказуйте стандартний курсор, що запобігти ситуації, коли вказані вами зображення курсорів не доступні.
| Значення без задання: | auto |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.cursor="crosshair" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| cursor | 1.0 |
6.0 |
1.5 |
3.0 |
15.0 |
| Переглядач | ||
|---|---|---|
| cursor | 1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Приклад дії різних значень
Використання властивості
Встановлення різних курсорів
span.crosshair {
cursor: crosshair;
}
span.help {
cursor: help;
}
span.wait {
cursor: wait;
}