Що таке Курсори в CSS?
Щодня ми вже використовуємо налаштовані курсори. Ця взаємодія стала можливою завдяки використанню змінених курсорів, наприклад, коли ви наводите курсор на кнопки, курсор перетворюється на руку або коли ви наводите курсор на текст, і курсор перетворюється на текстовий курсор.
Однак курсори також можна використовувати, щоб надати нашим користувачам різні додаткові творчі можливості.
Ми повинні знати, що CSS вже має типові курсори для різноманітних часто виконуваних дій, перш ніж ми почнемо розробляти власні курсори.
Ці курсори надають варіанти дій саме в тому місці, на яке ви наводите курсор. Приклади включають курсори, які вказують, що ви повинні клацати посилання, перетягувати елементи, збільшувати та зменшувати масштаб об’єктів тощо.
Використовуйте властивість курсору CSS, щоб описати тип курсора, який вам потрібен.
Властивість курсору CSS
Ми можемо вказати тип курсору, який має бути показаний користувачеві, використовуючи властивість курсору CSS.
Використання фотографій як кнопок надсилання у формах є корисним застосуванням цієї можливості. За замовчуванням, коли курсор знаходиться над посиланням, замість покажчика з’являється рука. Однак кнопка надсилання у формі не призводить до зміни форми. Це служить візуальним підказкою того, що зображення можна натиснути щоразу, коли хтось наводить курсор на зображення, яке є кнопкою надсилання.
Ця властивість задається нулем або кількома значеннями, розділеними комами, за якими слідує одне значення ключового слова за потреби, і кожне посилається на файл зображення.
Синтаксис
cursor: value;
Вартість власності
| Авто: | Параметром за замовчуванням для цього атрибута є розміщення курсору.
| псевдонім: | Цей атрибут використовується для показу індикатора створення курсору.
| Повне прокручування: | Курсор у цьому атрибуті означає прокручування.
| клітинка: | Курсор у цій властивості вказує на те, що наразі вибрано клітинку або групу клітинок.
| Контекстне меню: | Курсор в цьому атрибуті показує наявність контекстного меню.
| Змінити розмір стовпця: | Коли курсор знаходиться над стовпцем у цій властивості, його розмір можна змінити горизонтально.
| копія: | Курсор у цій властивості вказує на те, що щось потрібно скопіювати.
| Перехрестя: | У цьому атрибуті курсор виглядає як перехрестя.
| за замовчуванням: | Курсор за замовчуванням.
| Е-розмір: | Курсор у цьому атрибуті вказує на те, що правий край поля має бути переміщений.
| Змінити розмір: | Курсор у цьому атрибуті представляє двонаправлений курсор зміни розміру.
| Довідка: | У цій властивості курсор показує, що допомога доступна.
| Перемістити: | Покажчик у цій властивості означає, що щось потрібно перемістити
| . n-змінити розмір: | Під час використання властивості n-resize вказівник показує, що верхня межа поля має бути зміщена.
| Що змінити розмір: | За допомогою цієї властивості курсор показує, що край коробки має бути зміщений праворуч і вгору.
| Новий розмір: | Двонаправлений курсор зміни розміру вказується цим атрибутом.
| Ns-змінити розмір: | Двонаправлений курсор зміни розміру позначається атрибутом ns-resize.
| Nw-змінити розмір: | Курсор у цьому атрибуті показує, що верхній і нижній краї коробки потрібно перемістити вгору і вліво.
| Зміна розміру носа: | Двонаправлений курсор зміни розміру вказується цим атрибутом.
| Без падіння: | Курсор у цьому атрибуті вказує на те, що витягнутий об’єкт не можна скинути в це місце.
| немає: | Курсор не відображається для елемента відповідно до цього атрибута.
| Не дозволено: | Курсор у цій властивості вказує на те, що запитана дія не буде виконана.
| покажчик: | Курсор у цій властивості служить покажчиком і відображає перебіг посилання.
| Прогрес: | Курсор у цьому атрибуті показує, що програма активна.
| Зміна розміру рядка: | Курсор показує, що ця функція дозволяє змінювати розмір вертикального рядка.
| S-розмір: | Під час використання цієї властивості покажчик показує, що нижня межа коробки повинна бути опущена.
| Змінити розмір: | Курсор у цьому атрибуті вказує на те, що край коробки має бути зміщений праворуч і вниз.
| Sw-змінити розмір: | Курсор у цьому атрибуті вказує на те, що лівий і нижній краї поля повинні бути переміщені.
| Текст: | Курсор у цьому атрибуті позначає текст, який можна вибрати.
| URL: | Ця властивість містить список URL-адрес спеціального курсору, розділених комами, і загальний курсор у кінці списку.
| Вертикальний текст: | Курсор у цьому атрибуті показує можливі вертикальні виділення тексту.
| W-розмір: | Під час використання цієї властивості покажчик показує, що лівий край коробки має бути переміщений.
приклад
У цьому прикладі показано, як використовувати властивість cursor. Програма зайнята, оскільки значення властивості курсора встановлено на очікування.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Вихід
Ми можемо вказати тип курсору, який має бути показаний користувачеві, використовуючи властивість курсору CSS. Використання фотографій як кнопок надсилання у формах є корисним застосуванням цієї можливості. За замовчуванням, коли курсор знаходиться над посиланням, замість покажчика з’являється рука.
