Як змінити курсор миші на сайті

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

В общем-то, на цьому весь вибір і обмежується.

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

Відповідно, виникає питання, як це зробити і якими засобами?

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

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

Чому? Тому що курсор, який буде змінювати свій зовнішній вигляд в невідповідному місці і в невідповідний час може вводити користувача в оману.

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

Тому користуйтеся такою можливістю з обережністю.

Отже, спеціальне властивість CSS, яке дозволяє змінювати зовнішній вигляд курсору на сайті, має наступний синтаксис:

З цього виразу випливає, що курсор миші може бути або:

1) Обрано зі списку ключових слів, кожне з яких визначає особливу оформлення курсора;

2) Взято зі спеціального файлу із зображенням курсору

3) успадковувати від батьківських елементів.

Зовнішній вигляд курсору миші зі списку ключових слів:

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

Кожному значенню відповідає певне відображення курсора.

В даному прикладі, при наведенні курсору миші на абзац з текстом, він змінить своє оформлення.

Зовнішній вигляд курсору миші з файлу:

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

Файли з зображеннями для курсорів можна без проблем знайти в Інтернеті.

Ось приклад, як можна скористатися такою можливістю.

Де name.cur - ім'я і розширення курсора миші, який ви хочете використовувати.

Успадкованих зовнішній вигляд курсору:

І останнє, курсор миші може бути успадковувати від своїх батьків. наприклад,

Хоча зовнішній вигляд курсору був призначений для тега div, але все одно при наведенні курсору миші на тег до абзацу

, курсор змінює своє оформлення.

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

Ось такі можливості надає нам технологія CSS, для роботи з курсором.

До речі, якщо вам буде цікаво, я займаюся веб-аналітикою сайтів. Якщо ви хотіли б зробити ваш сайт більш ефективним і, щоб він приносив більше грошей, веб-аналітика може в цьому допомогти.

Навчальний курс для початківців з основ роботи з веб-аналітикою сайтів на системі Яндекс Метрика тут.

Сторінка з описом моїх послуг з веб-аналітиці: тут.