Question

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

Answer 1

为你的精灵添加悬停非常简单，只需在图像文件名中加上“_hover”（或“_ active”或“_target”），让指南针为你生成精灵地图= D.

Answer 2

嗯，罗盘的作用实际上是将所有单独的图像转换为一个精灵，并为每个图标提供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)

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

指南针精灵悬停状态

3 个答案: