CSS导航精灵 - 奇怪的形状(不是正方形)

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

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