html - CSS Navigation Sprite - 奇怪的形状（不是正方形）

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

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

然后我认为我必须为每个项目制作单独的图像......但这也不会因为重叠的箭头部分而完全正确。

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

我被难住了。有任何想法吗？

score 5 · Accepted Answer

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

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

这是它如何完成的链接（向下滚动到“不规则形状”）：http ://www.alistapart.com/articles/sprites

score 2 · Accepted Answer

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

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

这样，您始终可以剪切精灵；如果你的元素的索引是“奇数”（index & 1 == 1），你只需要添加到 Y 值。

score 2 · Accepted Answer

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

score 0 · Accepted Answer

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

4 回答 4