Gli URL del cursore sono relativi al file css?

Question

So che i percorsi dovrebbero essere relativi al file css, ma non sembra essere il caso di un'immagine che sto cercando di usare come un cursore.

La struttura dei file è:

Content/Site.css 
Content/images/butteryfly.ani 
Content/images/user.png 

Site.css:

.butterfly 
{  
cursor: url('images/butterfly.ani'), pointer;  
} 

/*this works*/ 
.ui-icon-user 
{ 
    background-image: url(images/user.png) !important; 
    background-position: 0 0; 
} 

Funziona se cambio a:

.butterfly 
{  
cursor: url('Content/images/butterfly.ani'), pointer;  
} 

Perché non funziona l'URL relativo per il cursore?

Modifica: Non funziona in Chrome, Firefox o IE9. In tutti i browser mostra il cursore della mano invece di quello personalizzato.

Edit2: Per seguire: come faccio a farlo funzionare sul mio sito, poiché le pagine html si trovano a diversi livelli? C'è un modo per specificare un URL relativo in qualche modo in css o dovrei semplicemente mettere una copia del cursore allo stesso livello di ogni pagina (che schifo!)?

Answer 1

È necessario utilizzare l'estensione .cur per farlo funzionare sia in IE che in FF. E in IE11 e precedenti l'URL del file del cursore è relativo alla pagina non al file css.

cursor: url('http://example.com/Content/images/butteryfly.cur'), default; 

Cercare di evitare l'utilizzo di due valori di url poiché provoca un hit non necessario sul server da IE. Invece, utilizzare un URL assoluto che funzionerebbe bene in IE, FF e Chrome. Opera userebbe l'impostazione predefinita.

Answer 2

So solo che Internet Explorer interpreta gli URL relativi come relativi al documento HTML, ma i browser moderni (Mozilla Firefox, Google Chrome) interpretano gli URL relativi rispetto al ".css".

/* 
The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS  file 
*/ 

#example { 
    cursor: url('arrow.cur'),   /* Modern browsers */ 
      url('style/arrow.cur'),  /* Internet Explorer */ 
      default; 
}  

Answer 3

Ti suggerisco di leggere questo breve articolo. http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/

Esistono 3 soluzioni per un bug di IE: IE non interpreta gli URL dei cursori personalizzati come relativi. Altri tipi di URL vengono interpretati correttamente in IE percorsi assoluti

1. uso
2. mossa lo stile cursori nella pagina HTML tra i tag
3. uso di IE commenti condizionali, simile alla soluzione fornita da John C.