¿Es posible ocultar el cursor en una página web usando CSS o Javascript?

129

Quiero ocultar el cursor cuando muestre una página web destinada a mostrar información en el pasillo de un edificio. No tiene que ser interactivo en absoluto. Intenté con la propiedad del cursor y una imagen de cursor transparente, pero no lo hice funcionar.

¿Alguien sabe si esto se puede hacer? Supongo que esto puede considerarse como una amenaza de seguridad para un usuario que no puede saber dónde está haciendo clic, así que no soy muy optimista ... ¡Gracias!

javascript html css yeyeyerman
fuente

Respuestas:

203

Con CSS:

selector { cursor: none; }

Un ejemplo:

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

Para configurar esto en un elemento en Javascript, puede usar la stylepropiedad:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

Si desea configurar esto en todo el cuerpo:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

Sin embargo, asegúrese de que realmente quiere ocultar el cursor. Realmente puede molestar a la gente.

Lucas Jones
fuente
Eso funcionó perfecto! Lo curioso es que examiné la especificación W3C ( w3.org/TR/CSS2/ui.html ) y no dijeron nada al respecto. ¡Gracias!
yeyeyerman el
10
W3 más bien! World World Wide Web.
Lucas Jones
44
Cómo preocuparse por los navegadores que no admiten CSS3: utilice un 1x1png transparente PNG o un 1% de transparencia png.
Derek 朕 會 功夫
1
Que yo sepa, IE6 admite PNG transparente, siempre que sea una transparencia real y no una transparencia de canal alfa. En caso de duda, verifíquese con el paquete de prueba: libpng.org/pub/png/pngsuite.html .
Shi
3
@MatthiasHerrmann: Intenta document.body.style.cursor = 'auto'.
Lucas Jones
30

API de bloqueo de puntero

Mientras que la cursor: nonesolución de CSS es definitivamente un sólido y fácil solución , si su objetivo real es quitar el cursor por defecto, mientras se está utilizando la aplicación web, o de poner en práctica su propia interpretación del movimiento del ratón prima (para juegos FPS, por ejemplo), es posible que desee considerar el uso de la API de bloqueo del puntero en su lugar.

Puede usar requestPointerLock en un elemento para eliminar el cursor y redirigir todos los mousemoveeventos a ese elemento (que puede o no manejar):

document.body.requestPointerLock();

Para liberar el bloqueo, puede usar exitPointerLock :

document.exitPointerLock();

Notas adicionales

Sin cursor, de verdad

Esta es una llamada API muy poderosa. No solo hace que su cursor sea invisible, sino que también elimina el cursor nativo de su sistema operativo . No podrá seleccionar texto ni hacer nada con el mouse (excepto escuchar algunos eventos del mouse en su código) hasta que se libere el bloqueo del puntero (ya sea usando exitPointerLocko presionando ESCalgunos navegadores).

Es decir, no puede dejar la ventana con el cursor para que se muestre nuevamente, ya que no hay cursor.

Restricciones

Como se mencionó anteriormente, esta es una llamada API muy poderosa y, por lo tanto, solo se puede realizar en respuesta a alguna interacción directa del usuario en la web, como un clic; por ejemplo:

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

Además, requestPointerLockno funcionará desde un entorno limitado a iframemenos que se establezca el allow-pointer-lockpermiso.

Notificaciones de usuario

Algunos navegadores solicitarán al usuario una confirmación antes de que se active el bloqueo, algunos simplemente mostrarán un mensaje. Esto significa que el bloqueo del puntero podría no activarse inmediatamente después de la llamada. Sin embargo, la activación real del bloqueo del puntero se puede escuchar escuchando el pointerchangeevento en el elemento en el que requestPointerLockse llamó:

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

La mayoría de los navegadores solo mostrarán el mensaje una vez, pero Firefox ocasionalmente enviará el mensaje de spam en cada llamada. AFAIK, esto solo se puede solucionar mediante la configuración del usuario, consulte Deshabilitar la notificación de bloqueo del puntero en Firefox .

Escuchando el movimiento crudo del mouse

La API de bloqueo de puntero no solo elimina el mouse, sino que en su lugar redirige los datos sin procesar del movimiento del mouse al elemento que requestPointerLockse activó. Esto se puede escuchar simplemente usando el mousemoveevento, luego accediendo a las propiedades movementXy movementYen el objeto de evento:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});
John Weisz
fuente
1
Gracias por esto. Encontré que este es el único medio confiable de desterrar el cursor en un SPA cuando se cambia a una presentación de diapositivas a pantalla completa.
Velojet el
1

Lo hice con * .cur transparente de 1px a 1px, pero parece un pequeño punto. :( Creo que es lo mejor que puedo hacer entre navegadores. CSS2.1 no tiene el valor 'none' para la propiedad 'cursor'; se agregó en CSS3. Es por eso que no funciona en todas partes.

zaycker
fuente
44
Use un 1% de transparencia .png / .cur en su lugar.
Derek 朕 會 功夫
1

Si quieres hacerlo en CSS:

#ID { cursor: none !important; }

fuente
77
En general, debe evitar !important.
Luca Steeb
0

Para todo el documento html intente esto

html * {cursor:none}

O si algunos css sobrescriben su cursor: ninguno usa! Important

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

Si desea ocultar el cursor en toda la página web, el uso bodyno funcionará a menos que cubra toda la página visible, lo que no siempre es así. Para asegurarse de que el cursor esté oculto en todas partes de la página, use:

document.documentElement.style.cursor = 'none';

Para volver a habilitarlo:

document.documentElement.style.cursor = 'auto';

El análogo con la notación CSS estática está en la respuesta por Pavel Salaquarda (en esencia: html * {cursor:none})

gaspar
fuente