Від автора: браузер автоматично змінює курсор миші в контексті безлічі елементів інтерфейсу. Наприклад, при наведенні на посилання він змінюється на руку. Проте є ситуації, коли вам потрібно вручну міняти значок вказівника миші для певних операцій (іконка компаса показує, що елемент можна перемістити). Зазвичай це робиться через CSS, зокрема через властивість cursor.
Думайте, куди наводьте вказівник
Вкрай важливо розуміти, що не можна змінювати курсор миші, просто «тому що». Вказівник – первинний метод взаємодії користувача з вашим сайтом і його зміна просто тому, що вам так хочеться, може повністю зруйнувати очікування користувача інтерфейсу, що призведе до розчарування. Користувач просто покине сайт. Якщо ви використовуєте властивість cursor, воно завжди повинно підходити під вашу поточну задачу і відповідати очікуванням користувача.
Також важливо відзначити той факт, що зміна курсору в CSS не зачіпає його функціонал. Якщо встановити властивість cursor: grab, предмет автоматично не стане перетаскиваемым. Функціональна сторона питання обробляється на стороні JavaScript. CSS всього лише змінює уявлення курсору.
Властивість cursor задається для конкретних елементів. Часто це може бути :hover або інше схоже стан.
div#inked-painted:hover {
cursor: col-resize;
}
Діапазон іконок курсору в браузерах вкрай великий. В різних операційних системах одні і ті ж курсори виглядають по-різному. Єдиний спосіб забезпечити повну ідентичність в різних операційних системах – використовувати свої зображення (дивіться керівництво в кінці даної статті). Нижче можна переглянути іконки курсори, навівши вказівник миші на заголовок у лівому стовпці.
default — Значення за замовчуванням, звичайний покажчик
auto — Курсор змінюється залежно від контексту в браузері. Курсор не завжди буде приймати відповідний вид або той, який ви хочете.
none — Курсор відсутня. Обережно використовуйте це значення, воно може заплутати користувача.
context-menu — Контекстне меню доступно.
help — Є довідка
pointer — Асоціюється з наведенням миші на посилання. Іконка у вигляді руки
progress — Веб-додаток або сайт виконують операції у фоновому режимі, але ви все ще можете з ними працювати. Не плутайте з тегом progress. Часто відображається як wait (див. нижче).
wait — Додаток зайнято (зазвичай іконка у вигляді крутного кільця або годин).
cell — Показує, що клітинки таблиці можна вибрати.
crosshair — Хрест. Часто використовується для індикації обраної області на зображеннях.
text — Горизонтальний текст можна виділити.
vertical-text — Вертикальний текст можна виділити.
alias — Можна створити аліас, ярлик або символічне посилання.
copy — Контент можна скопіювати.
move — Елемент можна перемістити.
no-drop — В цю область можна перемістити елемент. (Часто іконка збігається з not-allowed – дивіться нижче).
not-allowed — В цій області дія не може бути виконана.
all-scroll — Елемент можна прокручувати в будь-яких напрямках.
col-resize — Розмір елемента або колонки можна змінювати по горизонталі.
row-resize — Розмір елемента або ряду можна змінювати по вертикалі.
n-resize — Розмір елемента можна змінювати тільки по вертикалі.
e-resize — Розмір елемента можна змінювати тільки по горизонталі.
w-resize — Елемент можна розширити вліво.
s-resize — Елемент можна розширити тільки вниз.
ne-resize — Правий верхній кут елемента можна перетягнути.
nw-resize — Верхній лівий кут елемента можна перетягнути.
se-resize — Нижній правий кут елемента можна перетягнути.
sw-resize — Нижній лівий кут елемента можна перетягнути.
ew-resize — Розмір елемента можна змінювати по горизонталі.
ns-resize — Розмір елемента можна змінювати по вертикалі.
nesw-resize — Розмір елемента можна змінювати по діагоналі в зазначених напрямках.
nwse-resize — Розмір елемента можна змінювати по діагоналі в зазначених напрямках.
zoom-in — Елемент можна збільшити. Не підтримується IE.
zoom-out — Елемент можна зменшити. Не підтримується IE.
grab — Елемент можна захопити. Не підтримується IE; в інших браузерах необхідні вендорные префікси перед значенням(cursor: -webkit-grab і т. д.).
grabbing — Елемент захоплений. Не підтримується IE; як і в попередньому прикладі, тут потрібні вендорные префікси.
Саме значення не впливає на поведінка курсора: значення nesw-resize може спокійно виділяти текст.
Користувальницькі курсори
В якості іконки курсору можна вказати зображення. Ставиться воно точно так само, як і фонове зображення. Однак з даним методом є ряд проблем:
IE підтримує тільки файли форматів .cur і .ani, інші браузери підтримують рекомендований PNG (так як в ньому є альфа-канал);
Всі браузери крім IE підтримують швидку зміну курсорів – активація частини курсору. IE ігнорує координати Х і У.
Дизайн курсору миші, як і фавикона, вимагає особливої обережності. Ці елементи можуть бути розташовані як на білому, так і на темному тлі. Саме тому вони повинні прекрасно працювати у всіх умовах. Приклад на малюнку нижче:
Для користувача курсору необхідно прописувати покажчик за замовчуванням і фолбэк, які потрібні для браузерів типу IE:
canvas {
cursor: crosshair;
cursor: url(circular-cursor.png) 53 53, crosshair;
}
Значення 53 53 показує сам курсор, його центр.
