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

108

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

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

Ваш Ответ

7   ответов
2

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

Вместо этого используйте прозрачность 1% .png / .cur.
21
Pointer Lock API

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

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

document.body.requestPointerLock();

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

document.exitPointerLock();
Additional notes

No cursor, for real

Это очень мощный вызов API. Это не только делает ваш курсор невидимым, ноit actually removes your operating system's native cursor, Вы не сможете выбрать текст или сделатьanything с помощью мыши (кроме прослушивания некоторых событий мыши в вашем коде) до снятия блокировки указателя (либо с помощьюexitPointerLock или нажавESC в некоторых браузерах).

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

Restrictions

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

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

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

User-notifications

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

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

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

Listening to raw mouse movement

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

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

С помощью 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>

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

W3 скорее! МирWorld Интернет.
Насколько мне известно, IE6 поддерживает прозрачный PNG, если это реальная прозрачность, а не прозрачность альфа-канала. Если вы сомневаетесь, проверьте себя с набором тестов:libpng.org/pub/png/pngsuite.html.
Это сработало отлично! Любопытно, что я выследил спецификацию W3C (w3.org/TR/CSS2/ui.html) и они ничего не сказали об этом. Спасибо! yeyeyerman
@MatthiasHerrmann: попробуйdocument.body.style.cursor = 'auto'.
Как заботиться о браузерах, которые не поддерживают CSS3: Используйте1x1 px прозрачный png или 1% прозрачность png.
0

Когда я делаю

body {
   cursor: none;
}

Все, что меняется, - это исчезновение курсора (что я и хочу), но проблема в том, что, когда он нажимает на кнопку, он появляется снова, пока я не уберу с него курсор.

рассмотрите возможность добавления дополнительной информации в свой ответ
2

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

#ID { cursor: none !important; }
Вы должны вообще избегать!important.
0

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

html * {cursor:none}

Или если некоторые CSS перезаписать ваш курсор: ни один не использовать! Важный

html * {cursor:none!important}
4

.nocursor {
  cursor: none;
  
  padding: 2em;
  border: 1px solid #000;
}
<div class="nocursor">
  Bye cursor!
</div>

Похожие вопросы