css - using cursors sprites

Question

.fancybox-inner {
overflow: hidden;
background-color:#EEE;
cursor: //url to an independent cursor image
 }

But what if my cursors (3) are all together in one css sprite image, how I can reference background-position, width, height values of the cursor property.

something like

cursor .fancybox-inner OR .fancybox-inner:hover cursor{
background: url(../img/cursors.png) no-repeat;
background-position: -32px 0;
width: 16px;
height: 16px;
 }

Answer 1

Although the cursor property allows for x and y values, they are not used for background position, but rather for the coordinates of the cursor's hotspot

This is the syntax for the cursor property: (see mozilla)

cursor:  [<uri> [<x> <y>]?,]* keyword

For example:

.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

The example will set the hotspot to be the pixel at (4,12) from the top left (0,0).