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 midd开发者_JAVA百科le 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)

---

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

---

The basic syntax is as follows:

cursor: url(image) [x y|auto];

However there are a number of quirks to be aware of that make it quite tricky to work with cross-browser.

The main one is that Internet Explorer requires the cursor to be in '.cur' format, while other browsers require it in standard image format (eg '.gif'). If you want to support all browsers, you will need to create both, and write browser-specific code.

It apparently doesn't work at all in Opera.

The Quirksmode site has full details of all the oddities to expect.

---

CSS 3 hot spot positioning but this is not supported by IE https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property

cursor: url(cursor.gif) 2 2, pointer;
property: url x-coordinate y-coordinate, fallback image;