É possível ocultar o cursor em uma página da Web usando CSS ou Javascript?

129

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!

javascript html css yeyeyerman
fonte

Respostas:

202

Com CSS:

selector { cursor: none; }

Um exemplo:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
Expandir snippet

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.

Lucas Jones
fonte
Isso funcionou perfeito! O curioso é que espionei a especificação do W3C ( w3.org/TR/CSS2/ui.html ) e eles não disseram nada sobre isso. Obrigado!
Yeyeyerman 01/07/2009
10
W3 sim! Mundial Mundial Wide Web.
Lucas Jones
4
Como se preocupar com navegadores que não suportam CSS3: Use um 1x1png transparente de px ou png de transparência de 1%.
Derek
1
Que eu saiba, o IE6 suporta PNG transparente, desde que seja uma transparência real e não uma transparência do canal alfa. Em caso de dúvida, verifique-se com o conjunto de testes: libpng.org/pub/png/pngsuite.html .
Shi
3
@MatthiasHerrmann: Tente document.body.style.cursor = 'auto'.
Lucas Jones
30

API de bloqueio de ponteiro

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();

Notas Adicionais

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);
});
John Weisz
fonte
1
Obrigado por isso. Achei esse o único meio confiável de banir o cursor em um SPA ao mudar para uma apresentação de slides em tela cheia.
Velojet 21/11/19
1

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.

zaycker
fonte
4
Use 1% de transparência .png / .cur.
Derek
1

Se você quiser fazer isso em CSS:

#ID { cursor: none !important; }

fonte
7
Você geralmente deve evitar !important.
Luca Steeb
0

Para todo o documento html, tente isso

html * {cursor:none}

Ou se algum CSS sobrescrever seu cursor: nenhum use! Important

html * {cursor:none!important}
Pavel Salaquarda
fonte
0

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})

gaspar
fonte