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!
Respuestas:
Con CSS:
selector { cursor: none; }Un ejemplo:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>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.
1x1png transparente PNG o un 1% de transparencia png.
document.body.style.cursor = 'auto'.
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();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);
});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.
Si quieres hacerlo en CSS:
#ID { cursor: none !important; }!important.
Para todo el documento html intente esto
html * {cursor:none}O si algunos css sobrescriben su cursor: ninguno usa! Important
html * {cursor:none!important}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})