सीएसएस पृष्ठभूमि स्थिति

Question

लिटिल यहाँ सवाल है, मैं एक स्प्राइट छवि कि सामान्य के साथ प्रतीक होते हैं और प्रभाव मंडराना है ..

और यह सीएसएस मैं अब के लिए है ..

.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;} 

आप के रूप में देख सकते हैं, माउस की सामान्य स्थिति पृष्ठभूमि स्थिति Y = 0 साथ हमेशा होता है, तो होवर छवियों Y = -24px

चिह्नों के लिए मेरे एचटीएमएल बिल्कुल हो रहा है:

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

सवाल यह है कि: केवल वाई स्थिति को बदलना संभव है, इसलिए मैं हर आइकन के लिए एक सीएसएस लाइन रखने के बजाय होवर राज्य के सभी आइकन के लिए एक सीएसएस लाइन असाइन कर सकता हूं?

कुछ की तरह:

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

बजाय

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

Answer 1

मैं अपने दर्द महसूस!

यह सभी ब्राउज़रों पर काम नहीं करता।

यह सुझाव दिया गया था कि background-positionbackground-position-x और background-position-y को केवल एक अक्ष को आसानी से बदलने में सक्षम हो। अफसोस की बात है कि डब्ल्यू 3 सी लोगों ने फैसला किया कि यह मानक में जोड़ने के लिए पर्याप्त उपयोगी नहीं था। आप इसके बारे में अधिक जानकारी यहां देख सकते हैं Bugzilla thread और here on w3c website

हालांकि यह क्रोम पर काम करता है, ऐसा लगता है कि फ़ायरफ़ॉक्स केवल प्रमुख ब्राउज़र से इसका समर्थन नहीं करता है। लेकिन यह अभी भी मानक में नहीं है और यह सीएसएस जब तक नहीं हो सकता है 4.