Як змінити курсор браузера за допомогою css

Вкрай важливо розуміти, що не можна змінювати курсор миші просто «тому що». Покажчик миші - первинний метод взаємодії користувача з вашим сайтом, і його зміна просто тому, що вам так хочеться, може повністю зруйнувати очікування користувача від інтерфейсу, що призведе до розчарування. Користувач просто покине сайт. Якщо ви використовуєте властивість cursor, воно завжди має підходити під вашу поточну задачу і відповідати очікуванням користувача.

Властивість cursor задається для конкретних елементів. Часто це може бути: hover або інше схоже стан.

default - Значення за замовчуванням, звичайний покажчик

auto - Курсор змінюється в залежності від поточного контексту в браузері. Курсор не завжди буде приймати відповідний вид або той, який ви хочете.

none - Курсор відсутня. Обережно використовуйте це значення, воно може заплутати користувача.

context-menu - Контекстне меню доступно.

help - Є довідка

pointer - Асоціюється з наведенням миші на посилання. Іконка в вигляді руки

progress - Веб-додаток або сайт виконують операції в фоновому режимі, але ви все ще можете з ними працювати. Не плутайте з тегом progress. Часто відображається як wait (див. Нижче).

wait - Додаток зайнято (зазвичай іконка у вигляді крутиться кільця або годин).

cell - Показує, що елементи таблиці можна вибрати.

crosshair - Хрест. Часто використовується для індикації обраної області на зображеннях.

text - Горизонтальний текст можна виділити.

vertical-text - Вертикальний текст можна виділити.

alias - Можна створити алиас, ярлик або символічне посилання.

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 підтримують швидку зміну курсорів - активація частини курсора. IE ігнорує координати Х і У.

Дизайн курсора миші, як і фавікона, вимагає особливої ​​обережності. Ці елементи можуть бути розташовані як на світлому, так і на темному тлі. Саме тому вони повинні прекрасно працювати у всіх умовах. Приклад на малюнку нижче:

Для призначеного для користувача курсору необхідно прописувати покажчик за замовчуванням і фолбек, які потрібні для браузерів типу IE:

Значення 53 53 показує сам курсор, його центр.

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі

Практика HTML5 та CSS3 з нуля до результату!

«Для призначеного для користувача курсору необхідно прописувати покажчик за замовчуванням і фолбек ...»
Господа, Ви якою мовою пишіть? У Вас відмінний журнал, але поважайте ж Новомосковсктелей. Якщо Ви не знаєте англійську в межах теми, ну не публікуйте тоді статтю відразу - подивіться словник, чи що! Або російське слово «відступ» Вас якось принижує?

Михайло, в будь-професійному середовищі є маса жаргонізмів, професійних термінів, які не перекладаються. І веб-розробка тут не виняток. Тут також є багато таких термінів: баг, дебаг, див, лінк, урл, сайдбар, фолбек ... це перше, що спало на думку. Переводити їх ... ну, як би навіть і не прийнято, оскільки ці терміни як раз і є нормою. До речі, слово fallback все ж означає в даному випадку не відступ, а запасний варіант.
Так що ні про яке приниження мови немає, це просто професійна термінологія.