Posizione di sfondo appena verticale

Question

Ho un menu ul che esiste a partire da immagini con diverse larghezze per ogni li. Io uso uno sprite per i mouseover e bg. Lo sprite contiene tutte le possibili immagini per il menu. Quando passo il mouse, voglio che l'immagine di sfondo scatti a 160px su ogni li, e in qualche modo erediti la posizione orizzontale dello sfondo (ho capito che l'ereditarietà eredita da un genitore, non dall'elemento che chiami: passa sopra).

Come posso far scorrere la posizione dello sfondo verso l'alto e mantenere la posizione orizzontale la stessa. Esempio di codice qui sotto. Ho provato un sacco di cose, tra cui l'opzione Eredita nell'esempio qui sotto e so che c'è un'opzione di CSS3 chiamata background-position-y, ma quello non è crossbrowser ...

#menubar ul li.item-101{ 
    width:183px; 
    background-position: 0 0; 
} 
#menubar ul li.item-102{ 
    width:163px; 
    background-position: -183px 0; 
} 
#menubar ul li.item-103{ 
    width:204px; 
    background-position: -346px 0; 
} 
#menubar ul li.item-104{ 
    width:117px; 
    background-position: -550px 0; 
} 
#menubar ul li.item-105{ 
    width:173px; 
    background-position: -667px 0; 
} 
#menubar ul li:hover{ 
    background-position: inherit -160px; 
} 

Answer 1

Attualmente non è possibile utilizzando solo CSS (nella maggior parte dei browser utilizzati). Devi usare background-position: YOURVALUE -160px; ad ogni hover.

Forse un giorno vivremo in un mondo in cui questo è possibile.

Possibili soluzioni: jQuery può fare questo per voi, ma questo è probabilmente più lavoro quindi solo copia senza cervello incollare il vostro individuo: si libra, oppure è possibile utilizzare background-position-y ma questo è solo per un paio di browser in modo non proprio una scelta possibile

Answer 2

non vorrei tenere il tuo respiro per background-position-y in quanto non è nemmeno una parte delle specifiche CSS3. (Il problema è qui http://www.w3.org/Style/CSS/Tracker/issues/9). Alcuni browser come Chrome sono andati avanti e lo hanno comunque implementato, ma almeno Firefox e Opera devono ancora seguire, se lo sono anche.

A meno che non si voglia ricorrere a javascript, non c'è davvero alcun modo di farlo in CSS al momento.