指南针精灵悬停状态

Question

我正在使用Compass，并且我的Compass雪碧图已经正常工作。页面加载后，使用Compass生成的雪碧图显示我的图像。 我的问题是如何在这些图像上设置hover效果？由于我是Compass的新手，所以我不理解它应该如何工作，而Compass文档也没有帮助我。

- user416803

Answer 1

为您的精灵图像添加悬停效果非常简单，只需在图像文件名中加上"_hover"（或"_active"、"_target"），让compass为您生成精灵地图即可。

- 3amsleep

---

我不同意。Compass只是添加了一个:hover选择器并改变了背景位置。为什么这样做不好呢？因为在iOS上，点击事件之前会触发:hover，所以你会在页面切换之前短暂地看到悬停样式。更多信息请查看如何处理触摸屏设备上的:hover - Adam Tomat

Answer 2

您应该手动创建精灵表，像这样...

$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 和 cats-hover.png。要使用它们，您可以使用 i 元素（可以将其设置为类或其他任何内容）。

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

添加 hover 效果的方法是...

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

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

- Kyle Smith

Answer 3

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

- Yisela

---

好的，这个方法可以实现我想要的悬停效果，谢谢！现在我有一个新问题，当我悬停时，我看到的是图片的“滑动”效果，而不是像没有使用精灵图时那样立即替换。 - user416803