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.
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)