Скрытие курсора на веб-странице: решение на CSS и JS

Быстрый ответ

Для того чтобы скрыть курсор на веб-странице, примените CSS свойство cursor: none; к необходимым HTML-элементам:

body {
  cursor: none;
}

Вот таким образом курсор становится невидимым на всей веб-странице. Лучше вас не видит!

Управление видимостью курсора динамически с помощью JavaScript

Если же вы хотите динамически управлять видимостью курсора, для этого используйте JavaScript, устанавливающий свойство стиля элемента на none.

// Курсор здесь уже не нужен...
document.documentElement.style.cursor = 'none';

Этот код убирает курсор со всего сайта. Также можно указать конкретный элемент:

// Этому элементу курсор на пользу не пришелся.
document.getElementById('elementId').style.cursor = 'none';

Замените 'elementId' на идентификатор нужного элемента, и курсор станет невидимым при наведении на него.

Продвинутые методы: Pointer Lock API

Для полного управления над курсором можно воспользоваться Pointer Lock API, что особенно актуально при необходимости контролировать прямой ввод мыши, например, в играх.

// Пора скрыть курсор.
document.body.requestPointerLock();

Тем не менее, из-за риска недобросовестного использования, браузер может потребовать разрешения у пользователя. Чтобы вернуть курсор:

// Наступило время вернуть курсор.
document.exitPointerLock();

Pointer Lock позволяет точно контролировать движения мыши, открывая новые горизонты управления видимостью курсора.

Визуализация

Представьте, что это увлекательная игра, в которой всё подчинено курсору:

До исчезновения:
👀 🖱 – Курсор, активно влияющий на страницу.

После `cursor: none;`:
🙈 🖱 – Курсор исчез, как при чародейском исчезновении!

Когда в игру вступает JavaScript:
🤹‍♂️⛔🖱 – Курсор выступает звездой шоу, двигается вниз и вверх по воле владыки JavaScript.

Сегодня курсор есть, завтра его нет — словно фокусы иллюзиониста!

Бережно относитесь к пользовательскому опыту

Скрывайте курсор только тогда, когда это уместно и не ухудшит возможности пользователя навигации. При создании интерактивных сайтов предусматривайте альтернативные методы управления, чтобы не затруднять взаимодействие с сайтом.

Проблемы совместимости в разных браузерах

Совместимость в разных браузерах может стать проблемой. Иногда свойство cursor: none; не поддерживается везде, тогда пригодится использование !important:

* {
  cursor: none !important;
}

Такой подход делает стиль курсора однородным для всех элементов, предотвращая возникновение конфликтов стилей.

Опасения по поводу безопасности и прозрачных взаимодействий

Скрытие элементов управления может повлечь за собой риски, так как это может стать причиной проблем с безопасностью. Всегда поддерживайте открытый диалог с пользователями и обеспечивайте прозрачность работы сайта для исключения обмана и разочарований.

Неинтерактивные дисплеи или арт-инсталляции

Для автоматических киосков или арт-объектов, которые не требуют взаимодействия, скрытие курсора вполне подойдет. Всегда тестируйте свой продукт, чтобы обеспечить лучший пользовательский опыт.

Альтернативный вывод: использование прозрачных курсоров

Если скрыть курсор не удается, можно попробовать применить прозрачный .cur файл:

body {
  cursor: url('transparent.cur'), default;
}

Это менее типичный способ, который может сбивать пользователей с толку, но как резервный вариант он отлично подходит и делает курсор невидимым.

Преодоление ограничений при взаимодействии с пользователями

Учтите, что некоторые браузеры требуют активного взаимодействия пользователя, до того как скрипты внесут изменения в стили. Это может повлиять на вашу стратегию скрытия курсора с помощью JavaScript.

Полезные материалы

1. pointer-events | CSS-Tricks — Метод управления взаимодействием с помощью CSS pointer-events.
2. cursor – CSS: Cascading Style Sheets | MDN — Описание различных вариантов CSS стилей для курсоров.
3. Custom CSS Cursors — Руководство по изменению вида курсоров с помощью CSS и JavaScript.
4. ... and the winner is ... – QuirksBlog — Анализ поддержки CSS стилей курсоров в разных браузерах.
5. Using the Pointer Events Property – bitsofcode – Руководство по эффективному контролю над событиями указателя с использованием CSS и JavaScript.