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 t

Answer 1

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