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

Question

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

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

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

775 7

javascript html css

7 ответов:

Comments

Ничего не найдено.

Lucas Jones · Accepted Answer · 2009-07-02 00:26:51

С CSS:
selector { cursor: none; }
пример:
<div class="nocursor">
 
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
чтобы установить это на элемент в Javascript, вы можете использовать style свойства:
<div id="nocursor"></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>
если вы хотите установить это на все тело:
<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>
убедитесь, что вы действительно хотите, чтобы скрыть курсор,. Он может действительно раздражать людей.

John Weisz · Accepted Answer · 2017-07-09 12:08:57

указатель блокировки API

в то время как cursor: none CSS решение, безусловно, твердый и легкий решение, если ваша цель -удалить курсор по умолчанию во время использования вашего веб-приложения или реализации вашего собственные интерпретация движения мыши raw (например, для игр 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 разрешение установить.

пользователей-уведомления

некоторые браузеры будут запрашивать у пользователя подтверждение перед включением блокировки, некоторые просто отобразят сообщение. Это означает, что указатель блокировка может не активироваться сразу после вызова. Однако фактическую активацию блокировки указателя можно прослушать, прослушав 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);
});

hultqvist · Accepted Answer · 2016-08-10 09:48:49

другие ответы в действиях

.nocursor {
  cursor: none;
  
  padding: 2em;
  border: 1px solid #000;
}

<div class="nocursor">
  Bye cursor!
</div>

zaycker · Accepted Answer · 2010-04-26 13:43:11

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

Maël Wyssbrod · Accepted Answer · 2016-01-08 17:08:53

Если вы хотите сделать это в CSS:
#ID { cursor: none !important; }

Pavel Salaquarda · Accepted Answer · 2018-03-05 16:28:06

для всего HTML-документа, попробуйте это
html * {cursor:none}
или если некоторые css перезаписывают курсор: нет использования !важно
html * {cursor:none!important}

Arcade Workshop · Accepted Answer · 2018-08-07 22:59:11

когда я делаю
body {
   cursor: none;
}
все, что меняется, это курсор исчезает (что я и хочу), но проблема в том, что когда он переходит на кнопку, он снова появится, пока я не уберу от него курсор.