Quero ocultar o cursor ao mostrar uma página da Web destinada a exibir informações em um edifício. Não precisa ser interativo. Tentei com a propriedade cursor e uma imagem transparente, mas não a fiz funcionar.
Alguém sabe se isso pode ser feito? Suponho que isso possa ser pensado como uma ameaça à segurança de um usuário que não sabe onde está clicando, por isso não estou muito otimista ... Obrigado!
Respostas:
Com CSS:
selector { cursor: none; }Um exemplo:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Para definir isso em um elemento em Javascript, você pode usar a stylepropriedade:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>Se você deseja definir isso em todo o corpo:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>Certifique-se de que realmente deseja ocultar o cursor. Pode realmente irritar as pessoas.
1x1png transparente de px ou png de transparência de 1%.
document.body.style.cursor = 'auto'.
Enquanto a cursor: nonesolução CSS é definitivamente um sólido e de fácil solução , se o seu objetivo real é para remover o cursor padrão, enquanto o seu aplicativo web está sendo usado, ou implementar a sua própria interpretação do movimento matéria-rato (para jogos FPS, por exemplo), você pode deseja considerar o uso da API Pointer Lock .
Você pode usar requestPointerLock em um elemento para remover o cursor e redirecionar todos os mousemoveeventos para esse elemento (com o qual você pode ou não lidar):
document.body.requestPointerLock();Para liberar o bloqueio, você pode usar exitPointerLock :
document.exitPointerLock();Sem cursor, de verdade
Esta é uma chamada de API muito poderosa. Ele não apenas torna o cursor invisível, como também remove o cursor nativo do sistema operacional . Você não poderá selecionar texto ou fazer qualquer coisa com o mouse (exceto ouvir alguns eventos do mouse no seu código) até que o bloqueio do ponteiro seja liberado (usando exitPointerLockou pressionando ESCem alguns navegadores).
Ou seja, você não pode deixar a janela com o cursor para que ela apareça novamente, pois não há cursor.
Restrições
Como mencionado acima, essa é uma chamada de API muito poderosa e, portanto, só pode ser feita em resposta a alguma interação direta do usuário na Web, como um clique; por exemplo:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});Além disso, requestPointerLocknão funcionará em uma área restrita iframe, a menos que a allow-pointer-lockpermissão esteja definida.
Notificações do usuário
Alguns navegadores solicitarão ao usuário uma confirmação antes que o bloqueio seja ativado, outros simplesmente exibirão uma mensagem. Isso significa que o bloqueio do ponteiro pode não ser ativado imediatamente após a chamada. No entanto, a ativação real do bloqueio do ponteiro pode ser ouvida ouvindo o pointerchangeevento no elemento no qual requestPointerLockfoi chamado:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});A maioria dos navegadores exibe a mensagem apenas uma vez, mas o Firefox ocasionalmente envia spam para todas as chamadas. AFAIK, isso só pode ser contornado pelas configurações do usuário, consulte Desativar a notificação de bloqueio de ponteiro no Firefox .
Ouvindo o movimento bruto do mouse
A API Pointer Lock não apenas remove o mouse, mas também redireciona os dados brutos de movimento do mouse para o elemento em que requestPointerLockfoi chamado. Isso pode ser ouvido simplesmente usando o mousemoveevento e acessando as propriedades movementXe movementYno objeto de evento:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});Fiz isso com transparência * .cur 1px a 1px, mas parece um pequeno ponto. :( Acho que é a melhor coisa entre navegadores que posso fazer. O CSS2.1 não tem valor 'none' para a propriedade 'cursor' - foi adicionado no CSS3. É por isso que é viável em todos os lugares.
Se você quiser fazer isso em CSS:
#ID { cursor: none !important; }!important.
Para todo o documento html, tente isso
html * {cursor:none}Ou se algum CSS sobrescrever seu cursor: nenhum use! Important
html * {cursor:none!important}Se você deseja ocultar o cursor em toda a página da Web, o uso bodynão funcionará, a menos que cubra a página visível inteira, o que nem sempre é o caso. Para garantir que o cursor esteja oculto em todos os lugares da página, use:
document.documentElement.style.cursor = 'none';Para reativá-lo:
document.documentElement.style.cursor = 'auto';O análogo com a notação CSS estático está na resposta por Pavel Salaquarda (em essência: html * {cursor:none})