指南针精灵悬停状态

Question

我正在使用指南针，我已经让我的指南针精灵工作得很好。页面加载，使用指南针生成的sprite显示我的图像。我的问题是，我现在如何在这些上设置悬停？我是一个新的指南针，所以我不明白这是如何工作的，指南针文档对我没有帮助。

Answer 1

实际上，compass所做的就是获取所有独立的图像，将它们转换为一个sprite，并为您提供每个图标的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;
}

Answer 2

向精灵添加悬停非常简单，只需在图像文件名中添加"_hover“(或"_active”或"_target")，并让compass为您生成=D的精灵贴图。

Answer 3

你应该像这样手动创建你的精灵工作表...

$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和can hover.png要使用它们，你需要使用一个i元素(可以把它变成一个类或者你想要的任何东西)

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

要添加悬停...

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

我几乎可以肯定，有一种方法可以自动生成悬停状态，但我还没有真正花太多的时间来弄清楚。