[SOLVED] CSS change custom cursor image origin (hotspot) to center

CSS change custom cursor image origin (hotspot) to center

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.

Solution

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