CSS change custom cursor image origin (hotspot) to center

One solution would be to move the position of your image to match the mouse pointer

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

Doesn't respond to the question but this is working

HTML

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

You can set it by:

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

The two parameters I added set the center of your cursor.

I just found this from mozilla:

Support for the CSS 3 syntax for cursor values got added in Gecko 1.8 (Firefox 1.5):

cursor: [ [<x> <y>]?,]* keyword It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:

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

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
} 

/* fallsback onto 'auto' and 'pointer' in IE, but must be set separately */ The first number is the x-coordinate, and the second number is the y-coordinate. The example will set the hotspot to be the pixel at (4,12) from the top left (0,0).