मैं कंपास का उपयोग कर रहा हूं और मुझे अपने कंपास स्प्राइट्स ठीक काम कर रहे हैं। पेज लोड और मेरी छवियां कंपास जेनरेट स्प्राइट का उपयोग करके दिखाई देती हैं। मेरा सवाल यह है कि अब मैं इन पर होवर कैसे लगा सकता हूं? मैं कंपास के लिए नया हूं इसलिए मुझे समझ में नहीं आता कि यह कैसे काम करता है और कंपास दस्तावेज मेरी मदद नहीं कर रहा है।कम्पास होवर राज्य
ठीक है, वास्तव में कौन सी कंपास वास्तव में आपकी सभी अलग-अलग छवियों को लेता है, उन्हें एक स्प्राइट में बदल देता है और आपको प्रत्येक आइकन के लिए सीएसएस पृष्ठभूमि स्थिति देता है ताकि आप इसे अपनी स्टाइलशीट में पेस्ट कर सकें।
यदि आप अपने बटन के लिए होवर राज्य चाहते हैं, तो आपको सबसे पहले होवर आइकन बनाना होगा। उन्हें पहले स्प्राइट में शामिल किया जाना चाहिए (या एक अलग में हो सकता है, जब तक कि आप सही फ़ाइल को कॉल करते हैं)। कम्पास आपको इन "होवर स्टेट" आइकनों के लिए स्थिति देगा, और आपको बस इतना करना होगा कि उन पदों की प्रतिलिपि बनाएँ और उन्हें अपने होवर राज्य के लिए अपने सीएसएस स्टाइलशीट में पेस्ट करें। उदाहरण के लिए:
// your normal icon:
.icon {
background-image: url(yourimage.png);
background-position:-100px -100px;
}
// your hover icon - position for hover state image:
.icon:hover {
background-image: url(yourimage.png);
background-position:-200px -100px;
}
अपने स्प्राइट के लिए होवर जोड़ना बहुत आसान है, बस "_hover" (या "_active", या "_target") छवि फ़ाइल नाम में डाल दिया और कम्पास आप के लिए स्प्राइट नक्शा उत्पन्न करते है = डी ।
आप मैन्युअल रूप से इस तरह अपने स्प्राइट शीट बनाने चाहिए ...
$sprite-map: sprite-map("your_sprite_folder_here/*.png")
i
background: $sprite-map
display: inline-block
@each $icon in sprite_names($sprite-map)
.icn-#{$icon}
background-position: sprite-position($sprite-map, $icon)
+sprite-dimensions($sprite-map, $icon)
तो कहते हैं कि तुम में उस फ़ोल्डर ... cats.png और बिल्लियों-hover.png 2 स्प्राइट है उन्हें प्रयोग करने के लिए आप चाहते हैं एक मैं तत्व का उपयोग
<i class=".icn-cats"></i>
मंडराना को जोड़ने के लिए (यह एक वर्ग या जो भी आप चाहते हैं कर सकते हैं) ...
.icn-cats
&:hover
background-position: sprite-position($sprite-map, cats-hover)
मैं लगभग सकारात्मक हूं, होवर स्टेटस को स्वचालित रूप से उत्पन्न करने का एक तरीका है, लेकिन मुझे वास्तव में इसे समझने में काफी समय लगा है।
ठीक है यह काम करता है कि अब मेरे पास होवर है इसलिए धन्यवाद! एक नया सवाल अब मैं छवि को "स्लाइड" देखता हूं जब मैं तत्काल प्रतिस्थापन के बजाय होवर करता हूं क्योंकि मुझे स्प्राइट का उपयोग नहीं करना पड़ेगा। – user416803