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

Загальний опис

автор: NagarD

Синтаксис

cursor: value;

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

url

Встановлює картинку замість стандартного курсору. Дозволено вказувати декілька курсорів, розділюйте їх комами, останнім в списку вказуйте стандартний курсор, що запобігти ситуації, коли вказані вами зображення курсорів не доступні.

автор: Svitlana

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

Значення без задання: 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

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

HTML

<div class="move">
  Наведи на мене курсор...
</div>

CSS

.move { 
  cursor: move; 
  background: gold;
  padding: 36px;
  font-size: 3em;
}
автор: Svitlana

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

HTML

<h1>The Cursors of CSS</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>

CSS

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

body {
  text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}
.cursors {
  display: flex;
  flex-wrap: wrap;
}
.cursors > div {
  flex: 150px;
  padding: 10px 2px;
  white-space: nowrap;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 0 5px 5px 0;
}
.cursors > div:hover {
  background: #eee;
}
автор: Svitlana

Найуживаніші значення cursor — наведіть на комірку, щоб побачити вказівник.

HTML

<div class="grid">
  <div class="pointer">pointer</div>
  <div class="default">default</div>
  <div class="text">text</div>
  <div class="move">move</div>
  <div class="grab">grab</div>
  <div class="notallowed">not-allowed</div>
  <div class="wait">wait</div>
  <div class="progress">progress</div>
  <div class="zoomin">zoom-in</div>
  <div class="help">help</div>
  <div class="crosshair">crosshair</div>
  <div class="colresize">col-resize</div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    font-family: monospace;
    font-size: 15px;
}

.grid > div {
    padding: 18px 8px;
    text-align: center;
    background: #eef6ff;
    border: 1px solid #0172ad;
}

.pointer     { cursor: pointer; }
.default     { cursor: default; }
.text        { cursor: text; }
.move        { cursor: move; }
.grab        { cursor: grab; }
.notallowed  { cursor: not-allowed; }
.wait        { cursor: wait; }
.progress    { cursor: progress; }
.zoomin      { cursor: zoom-in; }
.help        { cursor: help; }
.crosshair   { cursor: crosshair; }
.colresize   { cursor: col-resize; }
автор: NagarD

Коментарі

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

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

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

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

Правка
Зворотний зв'язок
Вхід