cursor
Оновлено: 21.12.2022
cursor
Встановлює форму курсора, коли він перебуває в межах елемента. Вигляд курсора залежить від операційної системи та встановлених параметрів.
Коротка інформація
| Значення за замовчуванням | auto |
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
cursor: [url('адреса'),] | [ <курсор> ]Значення
| 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-text | 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 не підтримує. | |
 | 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 не підтримує. |
Залежно від операційної системи та її налаштувань вигляд курсора може відрізнятися від наведених у таблиці.
У разі додавання курсора з файлу синтаксис дещо видозміниться.
cursor: url(<адреса>), url(<адрес>), ..., <курсор>Через кому допускається вказувати кілька значень url, у цьому разі браузер спробує відкрити перший файл із курсором і якщо це з якихось причин не вийде, перейде до наступного файлу. Список обов'язково закінчується ключовим словом, наприклад, auto або pointer, допустимі значення перераховані вище.
Приклад
Об'єктна модель
Об'єкт.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.