css - 指南针精灵悬停状态

Question

我正在使用指南针，并且我的指南针精灵工作得很好。页面加载，我的图像使用指南针生成的精灵出现。我的问题是我现在如何在这些上设置悬停？我是指南针的新手，所以我不明白这应该如何工作，指南针文档对我没有帮助。

Answer 1

为你的精灵添加悬停非常简单，只需将“_hover”（或“_active”或“_target”）放在图像文件名中，然后让指南针为你生成精灵贴图 =D。

Answer 2

好吧，compass 所做的实际上是获取所有单独的图像，将它们变成一个精灵，并为您提供每个图标的 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 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)

然后说您在该文件夹中有 2 个精灵...cats.png 和cats-hover.png 要使用它们，您将使用 i 元素（可以将其设为类或任何您想要的）

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

要添加悬停...

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

I'm almost positive there is a way to automatically generate the hover state but I havent really put much time into figuring it out.