CSS приклад: cursor

Теги: CSS, курсор, веб-дизайн

Кратка інформація

Встановлює форму курсора в межах елемента, залежно від операційної системи та налаштувань.

Опис

Перед зміною вигляду курсора, розгляньте, чи буде це використовуватися відповідно. У багатьох користувачів такі зміни можуть викликати плутанину. У більшості випадків краще залишити все як є.

Синтаксис

cursor: [url('шлях до курсору'),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]

Значення

url
Дозволяє встановити власний курсор, вказавши шлях до файлу з курсором.
auto
Типовий курсор для поточного елемента.
inherit
Успадковує значення батька.

Інші допустимі значення наведені в таблиці.

Залежно від операційної системи та її налаштувань, вигляд курсора може відрізнятися від наведених в таблиці.

При додаванні курсора з файлу, синтаксис трохи змінюється.

cursor: url('шлях до курсору1'), url('шлях до курсору2'), ..., ключове слово

Приклади використання можна побачити в коді.

Об'єктна модель

[window.]document.getElementById("ідентифікатор елемента").style.cursor

Браузери

Деякі браузери підтримують додаткові форми курсорів. Належно до CSS3, значення включають такі типи як all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text.

Internet Explorer підтримує формати CUR та ANI для файлів курсорів, тоді як Firefox, Chrome, Safari підтримують CUR, PNG, GIF, JPG.

Opera не підтримує роботу з файлами курсорів.

Інтерфейс

Часті запитання

  • Q: Як використати cursor в CSS?

    A: Значення cursor в CSS вказує на тип курсора, який має бути відображений при наведенні на елемент. Наприклад, cursor: pointer; вказує, що курсор має бути типу покажчика.

  • Q: Де використовують cursor в CSS?

    A: cursor використовується в CSS для зміни вигляду курсора при взаємодії з різними елементами сторінки, такими як посилання, кнопки або інші інтерактивні елементи.

  • Q: Як змінити стандартний курсор в CSS?

    A: Щоб змінити стандартний курсор в CSS, використовуйте властивість cursor та вкажіть відповідне значення, яке відповідає типу курсора, який ви хочете використовувати.

  • Q: Як використовувати різні типи курсорів в CSS?

    A: В CSS можна використовувати різні типи курсорів, такі як pointer, help, progress, text тощо, вказуючи відповідні значення для властивості cursor.

  • Q: Чи можна створити власний курсор в CSS?

    A: Так, в CSS можна створити власний курсор, використовуючи URL з посиланням на зображення курсора. Наприклад, cursor: url('my-cursor.png'), auto; вказує, щоб використовувалося власне зображення курсора.