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