CSS change custom cursor image origin (hotspot) to center

Question

I want to use a custom image for a cursor.

This is fine, but from what I can see - the origin (tip of arrow) is by default at the top-left point of my image.

How can I set the origin to be the center of my image.

Here is a demo snippet to demonstrate the problem

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

<div>the cat in the hat<br> the cat in the hat<br> the cat in the hat<br> the cat in the hat</div>

Notice that when I try to select the text - it selects from the top-left of the image.

Answer 1

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;
}

Answer 2

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.

Answer 3

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).