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.html, css - cursor - cómo cambiar la imagen predeterminada para el puntero

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 hacer eso?

Fuente

2012-09-11 zozo

tengo que cambiar la imagen predeterminada para el cursor: puntero alguna imagen personalizada.

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

Puede hacerlo fácilmente usando jQuery/JavaScript. En primer lugar, aquí está la versión ligeramente más simple jQuery:

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

pura versión 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)"; 
    } 
}

Fuente

2012-09-11 12:09:04 Chris

Sí. Esto parece ser lo que necesito. No me parece ideal con js, pero es mejor que a la inversa. Una pregunta rápida ... ¿no es esto un poco digamos ... que el procesador es costoso (ya que parece que tengo que verificar esto al mover el mouse para verificar si se acerca)? – zozo

@zozo No, no revisas mousemove, solo hazlo una vez. Busca elementos que tienen un cursor 'puntero' de forma predeterminada, y usa su cursor personalizado en su lugar. – Chris

Sí, pero qué pasa si hay un puntero al pasar el mouse. Esos no se encontrarán en esa búsqueda. – zozo

sí se puede hacer esto fácilmente como gusta este archivo de imagen

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

debe ser 32x32 o más pequeño

parecer explorador de Internet sólo admite archivos .cur

more info

Fuente

2012-09-11 11:20:01

no hacia abajo derecho a voto, pero la pregunta hace explícita Estado:. * Para crear una clase y especificar el valor de la libración de cursor no es una solución válida, ya que tendría que añadir que la clase a todos los elementos ya realizados * –

No es lo que requiere el OP, [consulte esto] (http://stackoverflow.com/questions/12368502/html-css-cursor-how-to-change-default-image-for-pointer/12369387#comment16612213_12368621). – Chris

Con cursor opciones se pueden encontrar aquí http://www.echoecho.com/csscursors.htm para una imagen que puede utilizar

cursor:url(uri)

Fuente

2012-09-11 11:20:39 Breezer

Se puede crear una costumbre cursor para el elemento body, lo que, a menos que exista selectores posteriores, sirven para actuar como un defecto:

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

Fuente

2012-09-11 11:24:15

+1 para no olvidar la herencia. – Chris

No necesito que el cursor se vea de alguna manera. Necesito que el cursor se vea de alguna manera cuando es un puntero. Eso cambia el cursor para ser algo. Si el puntero sigue siendo la mano. – zozo

En cuyo caso, creo que va a estar atascado con la especificación de una imagen de cursor particular para todos los elementos que harían que el cursor sea un "puntero". Entonces, 'a',' button' {/*...*/} 'etc. –

Utilizando la propiedad "cursor" es lo mismo que con cualquier propiedad-CSS basta con aplicar al elemento deseado :

<style type="text/css"> 
body{ 
    cursor: url(mycursor.cur) 
} 
</style>

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

Fuente

2012-09-11 13:32:04 night11

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

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

Fuente

2017-02-26 20:39:56 EJW

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

Respuesta

Cuestiones relacionadas