在图像链接后面滑动背景图像

Question

所以，我有一个带菜单的html网页。我已经将菜单编码为一个有3个链接的列表。

菜单由Illustrator png图像组成:主页，联系人等。我想要实现的是，当你悬停在链接上时，某种颜色会从左侧滑动。此特定颜色也是Illustrator图像。

我可以通过一个简单的菜单纯文本，背景幻灯片的图像和jQuery：jQuery buttons来做到这一点(通过教程)，但我想用两个图像来做到这一点。

我的解释正确吗？我该如何尝试这样做呢？

Answer 1

有几种方法可以实现这一点，这里有3种方法。

1)将透明图像包含在您的背景图像雪碧图中。因此，您可以将这两幅图像组合在一起，并将其用作单个背景图像。然后你只需相应地定位背景图像即可。如果你不熟悉精灵，这里有一个讨论它们的帖子：CSS Sprite Button

2)将图片硬编码到您的链接中，并使用css生成背景色。这样你就不必使用单独的图像了。例如: a:hover {hover：#f00；}

3)将图片硬编码到您的链接中，并使用背景图片实现悬停效果。我不推荐这样做，因为这会导致你的链接变得不可搜索和不可选择。