Html CSS导航精灵-奇数形状（非方形）

我通常在制作CSS精灵方面没有问题，但是这个问题让我很困惑……我不知道如何解决它。基本上我有一个导航精灵，看起来像这样：

我使用的标准惯例是在

标记中列出它们，例如：

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

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

然后我想我必须为每个项目制作单独的图像。。。但由于箭头部分重叠，这也不太合适

也许我得把中间的箭头分隔符分开？我真的不确定

我被难住了。有什么想法吗？

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

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

---

这样，你就可以切一个雪碧；如果元素的索引为“奇数”（

index&1==1

），则只需添加Y值。

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

我认为您必须制作一个涵盖所有需求的“聪明”图像是正确的

很难用语言来解释，这里有一个示例链接：

---

下面是如何完成的链接（向下滚动到“不规则形状”）：

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

我使用这种技术绘制手表零件的分解图，其中每个零件在翻转时都高亮显示，用户可以单击查看信息/订购它们。。。

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