JavaScript Cursor Cambiar (y cambiar de nuevo)

Tengo esta página que hace algunas cosas funky de la base de datos que tardan unos segundos en procesarse, y mientras tanto me gustaría establecer un cursor "wait" para que el usuario no voltee y sigue haciendo clic en el botón. He mirado en elJavaScript Cursor Cambiar (y cambiar de nuevo)

document.body.style.cursor = "wait"

cosa, el problema con esto es que sólo funciona cuando el ratón está sobre el cuerpo de la página (es decir, todavía muestra el puntero normal, si es más de un botón). ¿Cómo puedo configurarlo para que no importa dónde esté el mouse en la página, se muestre un ícono de espera?

Una segunda parte de esta pregunta es, una vez que se hace es una cosa, ¿cómo la configuro? Si lo configuro de nuevo en "default", esto parece anular cualquier cambio de cursor "hover" que haya establecido en mi CSS (por lo que ya no se convierte en una mano cuando se trata de un objeto específico, etc.).

EDITAR: la primera respuesta funciona muy bien, excepto en IE no refresca el cursor (por lo que nota el cambio de tipo de cursor) hasta que mueva el cursor. ¿Alguna solución?

Fuente

2011-03-03 Jordan

Para su primer problema, intente utilizar cursor: wait !important;. Para el segundo problema, el cursor predeterminado para los elementos es cursor: auto;, no cursor: default; o cursor: inherit;.

Fuente

2011-03-03 01:57:43 Hello71

No creo que esta primera solución funcione en Firefox 16 o Chrome 23 (solo las que se probaron). Agregar '! Important' de hecho hace que no haga nada, en ambos navegadores. Sin eso, es como dice el OP. Funciona cuando el cursor está sobre el elemento del cuerpo, pero no debajo del final del mismo, o sobre los enlaces o elementos del formulario, muy probablemente cualquier cosa con una configuración propia explícita o construida. No lo codifiqué por completo, pero agregar una clase propuesta por @Tom Roggero podría funcionar, porque podrías agregar selectores más específicos para manejar otros elementos que lo requieran. – enigment

Cualquier elemento que no heredan el cursor por defecto (como botones) tendrá que configurar el cursor para heredar:

someButton.style.cursor = 'inherit';

Para volver al valor predeterminado para un elemento (y no romper cosas como :hover con un cursor forzada), la pusieron en una cadena vacía:

document.body.style.cursor = '';

Fuente

2011-03-03 01:53:05

lo que sugiero es dos cosas: a) Mejor escribir CSS como

body.waiting * { cursor: wait; }

b) utilizar el JS para manejar la clase de cuerpo

/* when you need to wait */ 
document.body.className = 'waiting'; 
/* to remove the wait state */ 
document.body.className = ''; // could be empty or whatever you want

Es posible que desee agregar la clase en lugar de sustituir todo el atributo de clase, lo que propongo es usar algo como jQuery para eso.

Fuente

2011-03-03 01:55:32

Votando esto porque puedes unir otros selectores más específicos a la misma clase, para manejar elementos como enlaces y campos de formulario con sus propias especificaciones inherentes del cursor, como se indicó anteriormente. – enigment

Sin embargo, todas las técnicas que he probado, incluida esta, no tienen efecto debajo de la parte inferior del contenido presentado. Curiosamente, una clase en el elemento HTML (en lugar de en el cuerpo) todavía deja el cursor predeterminado en vigor allí, aunque puede cambiar el color de fondo de esa área. – enigment

No es una respuesta a la pregunta, sino una forma de lograr lo que se busca.

Haz visible una div (consulta la clase a continuación) cuando estés cargando.

asegura que no se puede acceder a ningún elemento y la pantalla atenuada indica esto.
puede agregar un gif animado para indicar que algo está pasando en lugar del cursor.

.loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}

Fuente

2012-11-25 04:06:20 Mahks

Si está satisfecho con jQuery continuación, una forma rápida de solucionar este sería utilizar:

$('*').css('cursor','wait')

No sé cómo esto es elegante pero ha sido trabajando para mí,

Fuente

2017-05-12 11:43:48 ShudderPig

JavaScript Cursor Cambiar (y cambiar de nuevo)

Respuesta

Cuestiones relacionadas