¿Cambiar el cursor del mouse para toda la página?

Tengo un programa de UI de arrastre, donde el cursor del mouse en el elemento que se puede arrastrar cambia a una mano que se agarra al hacer clic.¿Cambiar el cursor del mouse para toda la página?

El problema es que permiten el arrastre a suceder en cualquier lugar de la pantalla, y el cursor sobre las etiquetas de anclaje, etc ...

he tratado $('*').addClass('grabbing'), pero es muy caro.

¿Existe una manera simple y fácil de manejar el código para manejar esto?

Fuente

2011-10-12 Wesley

Ver también: http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page –

hacerlo en el nivel de CSS:

* { 
    cursor: pointer; 
}

hacerlo en jquery lo obliga a repetir cada nodo individual en el Reino y volver a escribir sus clases CSS. En un documento largo, es una gran pérdida de tiempo.

Fuente

2011-10-12 15:39:04

Pero esto siempre estará activo. El cursor necesita cambiar solo mientras el mouse está hacia abajo. Tiene que suceder en Javascript de alguna manera. – Wesley

Puede agregar/eliminar dinámicamente reglas css a través de javascript. Simplemente hágalo desde dentro de onmousedown/onmouseup y debería ser más rápido que agregar/eliminar clases de cada nodo dom en la página. –

@Mark B Cool. ¿Puedes proporcionar una nueva respuesta con un ejemplo? Le daré una oportunidad y si funciona bien lo marcaré. – Wesley

probar esto

$('body').addClass('grabbing');

$(document).addClass('grabbing');

// EDITADO RESPUESTA

$('body').mousedown(function(e){ 
    $(this).css({'cursor':'pointer'}); 
}).mouseup(function(e){ 
    $(this).css({'cursor':'auto'}); 
});

Si Firebug está encendido, se puede ver los cambios en el estilo de etiqueta de cuerpo. Pero de alguna forma no está funcionando. Puede tomarlo como referencia y probar un enfoque similar a la solución de obtención.

Fuente

2011-10-12 15:38:22

no contratan a los elementos que anulan zIndex? –

@MikeChristensen Correcto. Esto no lo hará del todo. – Wesley

La única forma en que puedo pensar para hacer esto es bastante hacky.

Crea un DIV que tiene un índice z de algo más alto que todo lo demás en esa página, y tiene el cursor que deseas. Habilita ese div cada vez que el cursor del mouse baja. Código de ejemplo:

<html><body style="width: 100%; height: 100%;"> 
<DIV id="cover" style="position: absolute; width: 100%; height: 100%; zindex: 5000; top: 0px; left: 0px; cursor: pointer; background: transparent; display: none;">&nbsp;</div> 

<ul><li>One</li><li>Two</li><li>Three</li></ul> 

<script> 
    window.document.body.onmousedown = function() 
    { 
     document.getElementById('cover').style.display = ''; 
    }; 

    window.document.body.onmouseup = function() 
    { 
     document.getElementById('cover').style.display = 'none'; 
    }; 
</script> 

</body></html>

Fuente

2011-10-12 15:59:32

¿Cambiar el cursor del mouse para toda la página?

Respuesta

Cuestiones relacionadas