Solución:
Javascript es bastante bueno manipulando CSS.
document.body.style.cursor = *cursor-url*;
//OR
var elementToChange = document.getElementsByTagName("body")[0];
elementToChange.style.cursor = "url('cursor url with protocol'), auto";
o con jquery:
$("html").css("cursor: url('cursor url with protocol'), auto");
Firefox no trabajará ¡a menos que especifique un cursor predeterminado después del de la imagen!
otras palabras clave del cursor
También recuerde que IE6 solo admite cursores .cur y .ani.
Si el cursor no cambia: En caso de que esté moviendo el elemento debajo del cursor en relación con la posición del cursor (por ejemplo, al arrastrar el elemento), debe forzar un nuevo dibujo en el elemento:
// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);
working sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First jQuery-Enabled Page</title>
<style type="text/css">
div {
height: 100px;
width: 1000px;
background-color: red;
}
</style>
<script type="text/javascript" src="https://foroayuda.es/jquery-1.3.2.js"></script></head>
<body>
<div>
hello with a fancy cursor!
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
</script>
</html>
document.body.style.cursor="cursorurl";
Mire esta página: http://www.webcodingtech.com/javascript/change-cursor.php. Parece que puedes acceder al cursor sin estilo. Esta página muestra que se está haciendo con toda la página, pero estoy seguro de que un elemento secundario funcionaría igual de bien.
document.body.style.cursor="wait";
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)