tipo - manita en css

CSS cambia el origen de la imagen del cursor personalizado(zona interactiva) al centro

Question

Quiero usar una imagen personalizada para un cursor.

Esto está bien, pero por lo que puedo ver, el origen (punta de flecha) está por defecto en el punto superior izquierdo de mi imagen.

¿Cómo puedo configurar el origen para que sea el centro de mi imagen?

Aquí hay un fiddle para demostrar el problema.

div
{
width: 600px;
height: 100px;
background: pink;
cursor: url(http://placehold.it/50x30) , auto
}

Observe que cuando intento seleccionar el texto, se selecciona desde la parte superior izquierda de la imagen.

Answer 1

Acabo de encontrar esto de mozilla :

El soporte para la sintaxis de CSS 3 para los valores del cursor se agregó en Gecko 1.8 (Firefox 1.5):

cursor: [[ <x> <y> ]?,] * keyword Permite especificar las coordenadas de la zona interactiva del cursor, que se fijarán a los límites de la imagen del cursor. Si no se especifica ninguno, las coordenadas del punto de acceso se leen desde el propio archivo (para los archivos CUR y XBM) o se establecen en la esquina superior izquierda de la imagen. Un ejemplo de la sintaxis de CSS3 es:

.foo {
cursor: auto;
cursor: url(cursor1.png) 4 12, auto;
}
.bar {
cursor: pointer;
cursor: url(cursor2.png) 2 2, pointer;
}

/ * cae sobre ''auto'' y ''puntero'' en IE, pero debe configurarse por separado * / El primer número es la coordenada x, y el segundo número es la coordenada y. El ejemplo establecerá que la zona activa sea el píxel en (4,12) desde la parte superior izquierda (0,0).

Answer 2

Puedes configurarlo por:

cursor:url(http://placehold.it/50x30) 25 15, auto;

Los dos parámetros que agregué configuran el centro de tu cursor.

Answer 3

Una solución sería mover la posición de su imagen para que coincida con el puntero del mouse

cursor: url(image) [x y|auto];

No responde a la pregunta pero esto está funcionando.

HTML

div
{
width: 600px;
height: 100px;
background: pink;
cursor: url(http://placehold.it/50x30) 25 15, auto;
}