指南針精靈懸停狀態

我正在使用指南針，並且我的指南針精靈工作得很好。頁面加載和我的圖像顯示使用指南針生成的精靈。我的問題是，我現在如何在這些上設置懸停？我是新來的指南針，所以我不明白這應該如何工作，指南針文件不幫助我。指南針精靈懸停狀態

2012-09-05 user416803

嗯，指南針的功能實際上是將所有單獨的圖像轉化爲一個精靈，併爲每個圖標提供css背景位置，以便將其粘貼到樣式表中。

如果您想爲按鈕懸停狀態，您首先需要創建懸停圖標。它們應該包含在第一個精靈中（或者可以在不同的精靈中，只要你調用正確的文件）。然後，Compass會給你這些「懸停狀態」圖標的位置，你所要做的就是複製這些位置，並將它們粘貼到你的CSS樣式表中以獲得懸停狀態。例如：

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

來源

2012-09-05 22:38:37 Yisela

好吧，這工作，我現在有我的懸停，所以謝謝你！一個新的問題是我現在看到圖像「滑動」時，我懸停而不是即時替換，因爲我會看到不使用精靈。 – user416803

添加懸停到你的精靈是很容易，只要把「_hover」（或「_active」，或「_target」）的圖像文件名，並讓羅盤產生精靈地圖給你= d 。

來源

2012-11-23 21:47:41 3amsleep

http://compass-style.org/help/tutorials/spriting/magic-selectors/ – micah

應該是公認的答案！ – acme

mixin在這裏添加轉換https://gist.github.com/nathos/959764 –

您應該手動像這樣創建你的精靈表...

$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個元素（可以使這個任何你想要的類或）

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

要添加懸停......

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

我幾乎肯定有一種方法可以自動生成懸停狀態，但我沒有花費太多時間來計算懸停狀態。

來源

2013-04-18 16:05:35

指南針精靈懸停狀態

回答

相關問題