Question

我通常没有制作CSS精灵的问题，但是这个让我难过......我不知道如何解决它。基本上我有一个如下所示的导航精灵：

我正在使用<li>标签中的标准惯例，例如：

<li class="welcome"><a href="#" title="welcome">welcome</a></li>

然后应用CSS调整背景位置：

#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }

当然我没想到这个，但问题发生在悬停上。由于您只能定义“方形”区域，当您将鼠标悬停在元素上时，“蓝色”悬停状态将被转移到下一个导航项目。

然后我认为我必须为每个项目制作单独的图像......但由于重叠的箭头部分，这不会很正常。

也许我必须分开“中间”箭头分隔符？我真的不确定。

我在这里难过。有什么想法吗？

Answer 1

我认为你必须做出一个能够满足你所有要求的“聪明”形象。

很难用文字解释，这里是一个例子的链接：http://www.alistapart.com/d/sprites/ala-blobs2.html

以下是它完成方式的链接（向下滚动到'不规则形状'）：http://www.alistapart.com/articles/sprites

Answer 2

代替一行“活动”精灵，创建两个并交替激活它们，即：

  active > inactive > active > inactive ...
  inactive > active > inactive > active ...

这样，你总能剪掉一个精灵;如果元素的索引是“奇数”（index & 1 == 1），你只需要添加Y值。

Answer 3

您可以重新创建精灵，以便导航按钮垂直堆叠吗？然后你似乎可以使用负左边距将按钮放在一起。这样，按钮左侧的负空间将是空的，而不是在其中有箭头尖，因此在悬停时，腔将保持透明。

Answer 4

你可以扩展你的精灵并用5个单独的悬停状态线替换悬停状态，每个悬挂状态只有一个蓝色按钮，每个项目都有一个单独的悬停状态位置。文件大小不应太大。