指南针精灵悬停状态

Question

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

Answer 1

向你的精灵添加悬停非常简单,只需在图像文件名中加上"_hover"(或"_ active"或"_target"),让指南针为你生成精灵地图= D.

Answer 2

好吧，指南针的作用实际上是获取所有单独的图像，将它们转换为一个精灵，并为您提供每个图标的 css 背景位置，以便您将其粘贴到样式表中。

如果您想要按钮的悬停状态，您首先需要创建悬停图标。它们应该包含在第一个精灵中（或者可以包含在不同的精灵中，只要您随后调用正确的文件）。然后，指南针将为您提供这些“悬停状态”图标的位置，您所要做的就是复制这些位置并将它们粘贴到您的悬停状态的 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;
}