javascript - pointer - custom cursor css

asignar color al cursor del mouse usando CSS

Question

¿Cómo puedo asignar color al cursor del mouse en una página web?

¿Alguien puede sugerirme una forma de hacerlo usando alguna de las tecnologías, por ejemplo, HTML, CSS, JavaScript?

Answer 1

Debe crear / buscar un cursor personalizado. Luego, use la propiedad del cursor CSS para incluirla en su sitio web.

Hay un tutorial para esto aquí: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

Answer 2

Solo para agregar la posibilidad de agregar dinámicamente un cursor sin proporcionar una imagen pero generándola en el cliente con JavaScript y Canvas.

La demostración contiene un cursor simple dibujado con formas, pero esto podría haber sido simplemente imágenes, videos, etc. (todo lo que es un soporte de lienzo).

Fiddle (actualizado 5/2016 para Firefox - movido de documento a elemento) .

Nota: FireFox tiene un problema cuando el cursor se cambia con tanta frecuencia como en esta demostración: actualizado para cambiar solo una vez por segundo. FF borra el cursor al configurar una nueva imagen, pero como la nueva imagen debe decodificarse, muestra el valor predeterminado en el tiempo medio. Chrome espera hasta que la imagen se decodifique antes de cambiar.

En cualquier caso, es solo para mostrar que se puede hacer usando canvas: pruebe la demostración usando Chrome y no cambie el mouse con tanta frecuencia :-).

El bucle de animación que aquí cambia de color al azar para demostrar:

function loop() {

    var color = ''rgb('' + ((255 * Math.random())|0) + '',''
                       + ((255 * Math.random())|0) + '',''
                       + ((255 * Math.random())|0) + '')'';
    makeCursor(color);

    setTimeout(loop, 1000);
}

El creador del cursor:

function makeCursor(color) {

    // create off-screen canvas
    var cursor = document.createElement(''canvas''),
        ctx = cursor.getContext(''2d'');

    cursor.width = 16;
    cursor.height = 16;

    // draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    // set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = ''url('' + cursor.toDataURL() + ''), auto'';
}

Answer 3

Utilicé mi propio cursor hasta hoy. Versión azul de la flecha estándar. Archivo PNG con sombra alfa transparente. Me encantó. Pero ahora actualicé a 4K, y el PNG lógicamente no se escalará, por lo que parece pequeño. ¿Alguna solución para esto? Por ahora uso la cruz, porque no soporto el cursor de esa mano.

Tenía esto: cursor: url (img / pointer_blue.png), auto;

Ahora es: cursor: punto de mira;

Answer 4

Use una imagen junto con la propiedad del cursor CSS, no veo ninguna necesidad de JavaScript aquí ...

Demo

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

Como comenté, he usado el modo auto que no es más que default cursor en caso de que la imagen no se cargue, exactamente como declaramos varias familias de fuentes.