Kompass Sprites schweben

Question

Ich benutze Kompass und ich habe meine Kompass Sprites funktioniert gut. Die Seitenladungen und meine Bilder werden mit dem kompassgenerierten Sprite angezeigt. Meine Frage ist, wie setze ich jetzt einen Hover auf diese? Ich bin neu im Kompass, also verstehe ich nicht, wie das funktionieren soll und die Kompass-Dokumentation hilft mir nicht.

Answer 1

Nun, welcher Kompass macht eigentlich alle Ihre eigenen Bilder, verwandeln Sie sie in ein Sprite und geben Sie die CSS-Hintergrund-Positionen für jedes Symbol, so dass Sie das in Ihrem Stylesheet einfügen.

Wenn Sie Hover-Status für Ihre Schaltflächen möchten, müssen Sie zunächst die Hover-Symbole erstellen. Sie sollten im ersten Sprite enthalten sein (oder in einem anderen Sprite sein, solange Sie dann die richtige Datei aufrufen). Compass gibt Ihnen dann die Position für diese "Hover-State" -Symbole, und alles was Sie tun müssen, ist diese Positionen zu kopieren und sie in Ihr CSS-Stylesheet für Ihren Hover-Status einzufügen. Zum Beispiel:

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

schwebt auf Ihre Sprites Hinzufügen ist sehr einfach, einfach „_hover“ setzen (oder „_active“ oder „_target“) in den Image-Dateinamen und lassen Kompass für Sie die Sprite-Karte generiert = D .

Answer 3

Sie sollten Ihre Sprite Blatt manuell wie folgt erstellen ...

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

Dann sagen, Sie haben 2-Sprites in diesem Ordner ... cats.png und Katzen-hover.png sie nutzen zu können, würden verwenden, um ein i-Element (kann dies eine Klasse machen oder was auch immer Sie wollen)

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

den Hover hinzufügen ...

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

Ich bin fast sicher, dass es einen Weg gibt, den Schwebezustand automatisch zu generieren, aber ich habe wirklich nicht viel Zeit darauf verwendet, es herauszufinden.