CSS cursor — вигляд курсора: pointer, grab і власні

Властивість 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}
автор: Svitlana

Синтаксис

cursor: value;

Властивість cursor може отримувати 36 значень:

no-drop

Курсор вказує на те, що зміщаємий елемент не може бути зоставлений тут. Всі браузери, крім IE, відображають як not-allowed

автор: Svitlana

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

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"

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1.2 7 12 4
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 95 13.4

Приклади

+ запропонувати свій приклад у пісочниці

Наведи курсор на кожен фрагмент — вигляд вказівника міняється: приціл, знак питання, «зачекайте».

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; }
автор: Svitlana

Приклад дії різних значень

автор: Svitlana

Використання властивості

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.
Зворотний зв'язок
Вхід