Можно ли скрыть курсор на веб-странице с помощью CSS или Javascript?

129

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

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

javascript html css yeyeyerman
источник

Ответы:

203

С помощью CSS:

selector { cursor: none; }

Пример:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
Развернуть фрагмент

Чтобы установить это для элемента в Javascript, вы можете использовать styleсвойство:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

Если вы хотите установить это на все тело:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

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

Лукас Джонс
источник
Это сработало отлично! Любопытно то, что я просмотрел спецификацию W3C ( w3.org/TR/CSS2/ui.html ), и они ничего не сказали об этом. Спасибо!
yeyeyerman 01
10
W3 скорее! World World Wide Web.
Лукас Джонс,
4
Как заботиться о браузерах, которые не поддерживают CSS3: используйте 1x1прозрачный png px или 1% прозрачность png.
Derek 朕 會 功夫
1
Насколько мне известно, IE6 поддерживает прозрачный PNG, если это настоящая прозрачность, а не прозрачность альфа-канала. Если сомневаетесь, проверьте себя с помощью набора тестов: libpng.org/pub/png/pngsuite.html .
Ши
3
@MatthiasHerrmann: Попробуй document.body.style.cursor = 'auto'.
Лукас Джонс
30

Pointer Lock API

Хотя cursor: noneрешение CSS, безусловно, является надежным и простым обходным путем , если ваша фактическая цель - удалить курсор по умолчанию во время использования веб-приложения или реализовать собственную интерпретацию необработанного движения мыши (например, для игр FPS), вы можете хотите вместо этого рассмотреть возможность использования API блокировки указателя .

Вы можете использовать requestPointerLock для элемента, чтобы удалить курсор и перенаправить все mousemoveсобытия на этот элемент (который вы можете обрабатывать или не обрабатывать):

document.body.requestPointerLock();

Чтобы снять блокировку, вы можете использовать exitPointerLock :

document.exitPointerLock();

Дополнительные замечания

Нет курсора, по-настоящему

Это очень мощный вызов API. Он не только делает ваш курсор невидимым, но и фактически удаляет собственный курсор вашей операционной системы . Вы не сможете выделить текст или сделать что-либо с помощью мыши (кроме прослушивания некоторых событий мыши в коде) до тех пор, пока блокировка указателя не будет снята (с помощью exitPointerLockили нажатием ESCв некоторых браузерах).

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

ограничения

Как упоминалось выше, это очень мощный вызов API, и поэтому он может выполняться только в ответ на некоторое прямое взаимодействие с пользователем в сети, такое как щелчок; например:

document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

Кроме того, requestPointerLockне будет работать из песочницы, iframeесли не установлено allow-pointer-lockразрешение.

User-уведомления

Некоторые браузеры запрашивают у пользователя подтверждение перед включением блокировки, некоторые просто отображают сообщение. Это означает, что блокировка указателя может не активироваться сразу после вызова. Однако фактическую активацию блокировки указателя можно прослушать, прослушивая pointerchangeсобытие в элементе, для которого requestPointerLockбыл вызван:

document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

Большинство браузеров отображают сообщение только один раз, но Firefox иногда будет спамить сообщение при каждом вызове. AFAIK, это можно обойти только с помощью пользовательских настроек, см. Отключение уведомления о блокировке указателя в Firefox .

Прослушивание сырого движения мыши

API-интерфейс Pointer Lock не только удаляет мышь, но вместо этого перенаправляет необработанные данные о перемещении мыши на requestPointerLockвызываемый элемент . Это можно слушать просто используя mousemoveсобытие, то доступ к movementXи movementYсвойства на объекте события:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});
Джон Вайс
источник
1
Спасибо за это. Я обнаружил, что это единственный надежный способ избавиться от курсора в SPA при переключении на полноэкранное слайд-шоу.
Velojet
1

Я сделал это с прозрачным * .cur размером от 1 до 1 пикселей, но он выглядит как маленькая точка. :( Я думаю, что это лучшая кроссбраузерная вещь, которую я могу сделать. CSS2.1 не имеет значения 'none' для свойства 'cursor' - он был добавлен в CSS3. Вот почему он работает не везде.

zaycker
источник
4
Вместо этого используйте .png / .cur с прозрачностью 1%.
Derek 朕 會 功夫
1

Если вы хотите сделать это в CSS:

#ID { cursor: none !important; }

источник
7
Обычно вам следует избегать !important.
Лука Стиб,
0

Для всего html-документа попробуйте это

html * {cursor:none}

Или, если какой-то css перезапишет ваш курсор: никто не использует! Important

html * {cursor:none!important}
Павел Салакуарда
источник
0

Если вы хотите скрыть курсор на всей веб-странице, использование bodyне будет работать, если оно не охватывает всю видимую страницу, что не всегда так. Чтобы убедиться, что курсор скрыт везде на странице, используйте:

document.documentElement.style.cursor = 'none';

Чтобы снова включить его:

document.documentElement.style.cursor = 'auto';

Аналог со статической CSS нотации в ответ по Павлом Salaquarda (по сути: html * {cursor:none})

Gaspar
источник