16

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.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
user706071
  • 805
  • 3
  • 10
  • 25

4 Answers4

34

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)

U13-Forward
  • 69,221
  • 14
  • 89
  • 114
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
8

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
Radu Simionescu
  • 4,518
  • 1
  • 35
  • 34
  • I never knew this about the .cur format. Yet another reason for me to hate Chrome, though, but it's fortunate that it can still be resolved using CSS without resorting to hacks. Does Firefox simply use either the embedded coords or the CSS coords without issues since it supports coords in CSS? – BoltClock Oct 23 '13 at 06:41
  • Chrome now reads the hotspot from CUR files and if it is set also in the CSS property, the CSS has precedence. This issue was fixed in version 36 I think, at least it is fixed. – Bell Feb 05 '15 at 02:43
  • Hi @RaduSimionescu I added the above code in my css file, and found it doesn't work for IE/Edge. It just displays the default cursor for IE and Edge. – Ng2-Fun Feb 22 '17 at 16:55
  • @Ng2-Fun yeah, this was posted like 5 years ago... things might have changed a lot since then. – Radu Simionescu Feb 22 '17 at 17:07
  • @RaduSimionescu Sorry, it's my fault. This code still works. – Ng2-Fun Feb 22 '17 at 19:56
1

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 2
    Gecko and WebKit support the `.cur` format just fine. Also, `auto` is separate from the URI component. – BoltClock Apr 13 '11 at 13:06
  • 1
    @Bolt - ah, that's good. I guess I'm relying on Quirksmode too much for definitive answer on that sort of thing. :) – Spudley Apr 13 '11 at 13:12
1

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;
Andre Dublin
  • 1,148
  • 1
  • 16
  • 34