Встановлює форму курсору, коли він знаходиться в межах елемента. Вигляд курсору залежить від операційної системи та встановлених параметрів.
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
<code>cursor: [url('адреса'),] | [ <курсор> ] Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- url
- Дозволяє встановити свій власний курсор, для цього потрібно вказати шлях до файлу з курсором.
- auto
- Перегляд курсору за промовчанням для поточного елемента.
- none
- Вимкне відображення курсору.
Інші допустимі значення наведено в табл. 1. Щоб побачити, як курсор виглядає реально, наведіть на колонку Тест.
| Вигляд | Значення | Тест | Приклад | Примітка |
|---|---|---|---|---|
 | default | P {cursor: default} | ||
 | context-menu | P {cursor: context-menu} | Відображається лише в IE10+. | |
 | help | P {cursor: help} | ||
 | pointer | P {cursor: pointer} | ||
 | progress | P {cursor: progress} | ||
 | wait | P {cursor: wait} | ||
 | cell | P {cursor: cell} | ||
 | crosshair | P {cursor: crosshair} | ||
 | text | P {cursor: text} | ||
 | vertical-tex t | P {cursor: vertical-text} | ||
 | alias | P {cursor: alias} | ||
 | copy | P {cursor: copy} | ||
 | move | P {cursor: move} | ||
 | no-drop | P {cursor: no-drop} | Всі браузери, крім IE, відображаються як not-allowed. | |
 | not-allowed | P {cursor: not-allowed} | ||
 | all-scroll | P {cursor: all-scroll } | ||
 | col-resize | P {cursor: col-resize} | ||
 | row-resize | P {cursor: row-resize} | ||
 | n-resize | P {cursor: n-resize} | ||
 | ne-resize | P {cursor: ne-resize} | ||
 | e-resize | P {cursor: e-resize} | ||
 | se-resize | P {cursor: se-resize} | ||
 | s-resize | P {cursor: s-resize} | ||
 | sw-resize | P {cursor: sw-resize} | ||
| w-resize | P {cursor: w-resize} | |||
 | nw-resize | P {cursor: nw-resize} | ||
 | nesw-resize | P {cursor: nesw-resize} | ||
 | nwse-resize | P {cursor: nwse-resize} | ||
 | zoom-in | P {cursor: zoom-in} | IE не підтримує. | td>|
 | zoom-out | P {cursor: zoom-out} | IE не підтримує. | |
 | grab | P {cursor: grab} | Chrome, Opera, Safari підтримують значення -webkit-grab. IE не підтримує. | |
 | grabbing | P {cursor: grabbing} | Chrome, Opera, Safari підтримують значення -webkit-grabbing. IE не підтримує. |
Залежно від операційної системи та її налаштувань вид курсору може відрізнятися від наведених у таблиці.
При додаванні курсору з файлу синтаксис кілька видозміниться.
<code>cursor: url(<адреса>), url(<адреса>), ..., <курсор>
Через кому допускається вказувати кілька значень url, в цьому випадку браузер спробує відкрити перший файл з курсором і якщо це з яких-небудь причин не вийде, перейде до наступного файлу. Список обов'язково закінчується ключовим словом, наприклад auto або pointer, допустимі значення перераховані вище.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cursor</title> <style> .cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body> <p class="cross">На цьому тексті курсор миші набуде вигляду перехрестя.</p> <p> <a href="page/help.html" class="help">ДОВІДКА 1</a><br> <a href="page/help.html" class="help">ДОВІДКА 2</a><br> <a href="page/help.html" class="help">ДОВІДКА 3</a>
</p>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cursor</title> <style> a { cursor: url(/example/cursor/sniper.cur), pointer; }
</style>
</head>
<body> <p>Звичайний текст</p> <p><a href="page/1.html">Посилання 1</a> <a href="page/2.html">Посилання 2</a> <a href="page/3.html">Посилання 3</a></p>
</body>
</html> Об'єктна модель
Об'єкт.style.cursor
Примітка
Internet Explorer як формат файлу курсора підтримує CUR та ANI. Firefox, Chrome, Safari підтримують формати CUR, PNG, GIF, JPG.
Chrome до версії 36, Opera до версії 24 та Safari до версії 9 підтримують значення -webkit-zoom-in та -webkit-zoom-out.
Firefox до версії 24 підтримує значення -moz-zoom-in та -moz-zoom-out.
Chrome до версії 22, Opera до версії 24 та Safari до версії 9 підтримують значення -webkit-grab та -webkit-grabbing.
Firefox до версії 27 підтримує значення -moz-grab та -moz-grabbing.
Браузери на мобільних пристроях не підтримують властивість cursor.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Basic User Interface Module Level 3 | Рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація)— група, яка відповідає за стандарт, задоволена, як вона відповідає з власним цілям, але потрібна допомога співтовариства розробників з реалізації стандарту. для остаточного затвердження.
- Working Draft (Робочий проект) — зріліша версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення правок редакторами проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize | 4 | 12 | 1 | 7 | 1.2 | 1 | ||||
| pointer, progress | 6 | 12 | 1 | 7 | 1.2 | 1 | ||||
| url() | 6 | 12 | 1 | 15 | 3 | 1.5 | ||||
| not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize | 6 | 12 | 1 | 10.6 | 3 | 1.5 | ||||
| alias, cell, copy, ew-resize, ns-resize, nesw-resize , nwse-resize, context-menu | 10 | 12 | 1 | 10.6 | 3 | 1.5 | ||||
| none | 6 | 14 | 5 | 15 | 5 | 3 | ||||
| zoom-in, zoom-out | 12 | 4 | 36 | 15 | 24 | 3.1 | 9 | 2 | 24 | |
| grab, grabbing | 12 | 4 | 22 | 15 | 24 | 4 | 9 | 1.5 | 27 | |
| 2.1 | 1 | 9.5 | 3 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.
Кількість вказує версію браузера, починаючи з якої властивість підтримується.