CSS change custom cursor image origin (hotspot) to center

css custom-cursor

Danield · Oct 24, 2013 · Viewed 46.1k times · Source

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

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

Answer

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