Я хочу скрыть курсор при отображении веб-страницы, предназначенной для отображения информации в холле здания. Это совсем не обязательно должно быть интерактивным. Я пробовал использовать свойство курсора и прозрачное изображение курсора, но у меня ничего не получилось.
Кто-нибудь знает, можно ли это сделать? Я полагаю, это можно рассматривать как угрозу безопасности для пользователя, который не может знать, где он нажимает, поэтому я не очень оптимистичен ... Спасибо!
Ответы:
С помощью 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>Однако убедитесь, что вы действительно хотите скрыть курсор. Это действительно может раздражать людей.
1x1прозрачный png px или 1% прозрачность png.
document.body.style.cursor = 'auto'.
Хотя 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);
});Я сделал это с прозрачным * .cur размером от 1 до 1 пикселей, но он выглядит как маленькая точка. :( Я думаю, что это лучшая кроссбраузерная вещь, которую я могу сделать. CSS2.1 не имеет значения 'none' для свойства 'cursor' - он был добавлен в CSS3. Вот почему он работает не везде.
Если вы хотите сделать это в CSS:
#ID { cursor: none !important; }!important.
Для всего html-документа попробуйте это
html * {cursor:none}Или, если какой-то css перезапишет ваш курсор: никто не использует! Important
html * {cursor:none!important}Если вы хотите скрыть курсор на всей веб-странице, использование bodyне будет работать, если оно не охватывает всю видимую страницу, что не всегда так. Чтобы убедиться, что курсор скрыт везде на странице, используйте:
document.documentElement.style.cursor = 'none';Чтобы снова включить его:
document.documentElement.style.cursor = 'auto';Аналог со статической CSS нотации в ответ по Павлом Salaquarda (по сути: html * {cursor:none})