html, css – cursor – cómo cambiar la imagen predeterminada para el puntero

Necesito cambiar la imagen predeterminada para el cursor: puntero con una imagen personalizada.

Crear una clase y especificar el valor de desplazamiento del cursor no es una solución válida, ya que tendría que agregar esa clase a todos los elementos ya hechos y, ¿sabes ?, no exactamente lo óptimo. Tampoco puede agregar esa clase a cuerpo ya que los elementos secundarios con cursor: puntero lo sobreescribirían.

¿Alguna idea de cómo hacerlo?

Necesito cambiar la imagen predeterminada para el cursor: puntero con una imagen personalizada.

Lo entendí mal al principio, pero después de leer este comentario , las cosas fueron más claras.

Puedes hacerlo fácilmente usando jQuery / JavaScript. Primero, aquí está la versión ligeramente más simple de jQuery:

$("*").each(function() { var cur = $(this); if(cur.css("cursor") == "pointer") { cur.css("cursor", "url(newcursor.ico)"); } }); 

Versión pura de JavaScript:

 var elms = document.getElementsByTagName("*"); var n = elms.length; for(var i = 0; i < n; i ++) { if(window.getComputedStyle(elms[i]).cursor == "pointer") { elms[i].style.cursor = "url(newcursor.ico)"; } } 

Puede crear un cursor personalizado para el elemento del body , que, a menos que sea anulado por los selectores posteriores, servirá para actuar como predeterminado:

 body { cursor: URL(images/cursorimage.cur); /* IE */ cursor: URL(images/cursorimage.gif); } 

sí, puedes hacer esto fácilmente así

  .anyclass{ cursor: URL(images/cursorimagefule.gif); } 

el archivo de imagen debe ser 32×32 o más pequeño

aparentemente Internet Explorer solo es compatible con archivos .cur

más información

Ninguno de estos funcionó para mí. Tuve que usar esta syntax ligeramente diferente. Observe la ‘url’ de lowercse, las comillas alrededor de la ruta y la sum de! Important. Además, cualquier tamaño funciona.

 body { cursor: url("mouseSm.png"), auto !important; } 

Con las opciones del cursor se pueden encontrar aquí http://www.echoecho.com/csscursors.htm para la imagen que puede usar

 cursor:url(uri) 

El uso de la propiedad “cursor” es el mismo que con cualquier propiedad de CSS, simplemente aplíquelo al elemento deseado:

  

Esto cambia el cursor de flecha predeterminado de una página web a una imagen personalizada en su lugar.