Pusula sprite ben pusula kullanıyorum durumu

Question

hover ve ben çok güzel çalışma benim pusula sprite var. Sayfa yüklenir ve resimlerim pusula oluşturulmuş hareketli grafiğini kullanarak görünür. Sorum şu ki, şimdi bunlara nasıl vurguluyorum? Pusula için yeniyim, bu yüzden bunun nasıl yapılacağını anlamadım ve pusula belgeleri bana yardım etmiyor.

Answer 1

Peki, pusula aslında tüm ayrı görüntüleri almak bir sprite haline getirmek ve stil bunu yapıştırmak böylece her simge için size css arka plan pozisyonları vermek görüyorsunuz. Eğer düğmeleri için devletler hover istiyorsanız

, önce vurgulu simgeleri oluşturmak gerekir. İlk hareketli grafiğe dahil edilmeleri gerekir (veya doğru dosyayı çağırdığınız sürece farklı olabilir). Pusula size daha sonra bu "vurgulu durum" simgeleri için konum verecektir ve yapmanız gereken tek şey bu konumları kopyalamak ve bunları hover durumunuz için css stil sayfanıza yapıştırmaktır. Örneğin: sprite için fareyi üzerine ekleme

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

Answer 2

, sadece = D çok kolay resmin dosya içinde "_hover" (veya "_active" veya "_target") koyun ve pusula sizin için sprite haritası oluşturmak let .

Answer 3

Sen

$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) 

Sonra onları siz olurdu kullanmak için bu klasör ... cats.png ve kediler-hover.png 2 sprite var ki ... elle böyle hareketli grafik sayfası oluşturmalısınız bir i elemanını kullanmak ...

<i class=".icn-cats"></i> 

hover eklemek için (bu ne istersen bir sınıf veya yapabilirsiniz)

.icn-cats 
    &:hover 
     background-position: sprite-position($sprite-map, cats-hover) 

Vurgulu durumun otomatik olarak oluşturulmasının bir yolu olduğu için neredeyse olumlu bir durumum var ama bunu anlamak için çok zaman harcadım.