css властивість cursor


Властивість 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;


}

Додаткові посилання