Я хочу скрыть курсор, показывая веб-страницу, предназначенную для отображения информации в зале здания. Он не должен быть интерактивным вообще. Я попытался с использованием свойства курсора и прозрачного изображения курсора, но я не сделал его работу.
Кто-нибудь знает, можно ли это сделать? Я полагаю, это можно считать угрозой безопасности для пользователя, который не может знать, на что он нажимает, поэтому я не очень оптимистичен... Спасибо!
С помощью CSS:
selector { cursor: none; }
Пример:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Хотя CSS-решение cursor: none, безусловно, представляет собой надежный и простой обходной путь, если вашей реальной целью является удаление курсора по умолчанию во время использования вашего веб-приложения или реализация собственной интерпретации движения мыши (например, для игр 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 блокировки указателя не только удаляет мышь, но и перенаправляет необработанные данные о перемещении мыши в вызываемый элемент requestPointerLock. Это можно прослушать, просто используя событие mousemove, а затем получая доступ к свойствам movementX и movementY объекта события:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
Другие ответы в действии
.nocursor {
cursor: none;
padding: 2em;
border: 1px solid #000;
}<div class="nocursor">
Bye cursor!
</div>Я сделал это с прозрачным *.cur 1px до 1px, но он выглядит как маленькая точка.:( Я думаю, что это лучшая кросс-браузерная вещь, которую я могу сделать. CSS2.1 не имеет значения "none" для свойства "cursor" - он был добавлен в CSS3. Вот почему он работает не везде.
Если вы хотите сделать это в CSS:
#ID { cursor: none !important; }
Для всего HTML-документа попробуйте это
html * {cursor:none}
Или если какой-то CSS перезаписывает ваш курсор: никто не использует! важный
html * {cursor:none!important}