Search code examples
javascripthtmlcssmouse-cursor

How can I set the hotspot to the center of a custom cursor?

I'm using a custom cursor (png image) on a web page using cursor CSS attributes. I'd like to know if I can center the cursor position (like the cross-hair cursor in Windows) and not using the default top-left position.

One solution will be to hide the cursor and create a div with the custom cursor which will follow the cursor position but maybe someone has a better solution.

Solution

  • If your cursor is in .cur format (only .cur and .ani are supported in IE), then whichever program you use to create the .cur can set the hotspot in the header.

    If you're using any other image type, CSS 3 allows the x and y values of the hotspot to be set:

    #myEl { cursor: url(mycursor.png) <x> <y>; }

    Supported in:

    • Firefox 1.5+
    • Safari 3+
    • Chrome 1+

    References