Search code examples
cssmouse-cursor

Custom CSS cursor click point


How can I give a custom click point to cursors created by cursor: url(theCursorUrl);? e.g. you're using a hand(grab) image for the cursor. But you want that the middle of the image to be the point where the actual cursor points.


Solution

  • CSS3 supports setting the midpoint of a cursor image, where the hotspot of the pointer (i.e. the point at which clicks are registered) is:

    cursor: url(mycur.cur) 6 6, auto;
    

    Where the two 6 values mean 6 pixels from the left and 6 pixels from the top respectively. The default hotspot is always the top left corner of your image, i.e. 0 0.

    Browser support for this feature may be rather poor though as it's a CSS3 feature, so it's not something you should rely on just yet. (That said, Firefox has supported it from version 1.5!) If a browser can't interpret the coordinates, the cursor property will be ignored, so be careful.

    EDIT in 2022: This feature should be supported on all browsers by now, except maybe some unknown ones and the mobile ones. (see caniuse)