Custom CSS cursor click point

Question

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.

Answer 1

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.

Answer 2

This is a rather delicate issue if you want cross browser compatibility for your custom cursor (when the hotspot is not in the upper left corner). First of all, you are constrained by IE to use .cur format. The .cur format also encapsulates the hotspot position. You can edit .cur format (there are free tools out there like Real World Cursor Editor) to set the hotspot pixel. Unfortunately, chrome ignores the encapsulated hotspot of the .cur format for some reason, and it sets it by default to 0, 0. So you must provide those coordinates, but this will make IE ignore the entire css property...

My approach when working with custom cursors with hotspots other than 0,0 is this:

First set the hotspot pixel at the desired coordinates (9,7 in this example) using a .cur editor. Then use something like below. This will cover IE, FF and Chrome

cursor:url(mycursor.cur), default;
cursor:url(mycursor.cur) 9 7, default; /*chrome cursor hotspot fix - ignored by IE