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.