Css - using sprite cursors

Question

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

But what if my cursors (3) are combined together in one css sprite image, how can I refer to the 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 accepts x and y values, they are not used for the background position, but rather for the coordinates of the cursor access point

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 sets the access point to a pixel at (4,12) from the top left (0,0).