CSS background-position

Question

Piccola domanda qui, ho un'immagine sprite che contiene le icone con normale e librarsi effetti ..

E questo è il css che ho per ora ..

.wi{ 
    background-image:url(images/icons/small/wi.png); 
    background-repeat:no-repeat; 
    display:block; 
    overflow:hidden; 
    height:24px; 
    width:24px; 
} 

.wi-delete{background-position:0 0;} 
.wi-edit{background-position:-24px 0;} 
.wi-fullscreen{background-position:-48px 0;} 
.wi-imageedit{background-position:-72px 0;} 
.wi-download{background-position:-96px 0;} 
.wi-tags{background-position:-130px 0;} 
.wi-windowed{background-position:-154px 0;} 

Come si può vedere, lo stato normale delle icone è sempre con sfondo di posizione Y = 0, in modo che le immagini Hover sono tutti a Y = -24px

mio html per le icone è:

<div id="something" class="wi wi-delete"></div> 

La domanda è: è possibile modificare solo la posizione Y in modo da poter assegnare una singola riga CSS per tutte le icone Stato Hover, invece di avere una linea css per ogni icona?

Qualcosa di simile:

.wi:hover{ 
background-position: auto -24px; 
} 

invece

.wi-delete:hover{background-position:0 -24px;} 
.wi-edit:hover{background-position:-24px -24px;} 
..and so on.. 

Answer 1

mi sento il vostro dolore!

Non funziona su tutti i browser.

È stato suggerito di dividere background-position a background-position-x e background-position-y per poter modificare facilmente un solo asse. Purtroppo le persone del W3C hanno deciso che non era abbastanza utile aggiungerlo allo standard. Puoi leggere di più qui Bugzilla thread e here on w3c website

Tuttavia funziona su Chrome, sembra che solo Firefox non lo supporta dal browser principale. Ma non è ancora nello standard e potrebbe non essere fino al CSS 4.