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

Question

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

菜单由 Illustrator png 图像组成：主页、联系人等。我想要实现的是，当您将鼠标悬停在链接上时，某种颜色会从左侧滑出。这种特定的颜色也是 Illustrator 图像。

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

我是否正确地解释了自己？ 我该如何尝试这样做？

Answer 1

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

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

2) 将图像硬编码到您的链接中并使用 css 生成背景颜色。这样您就不必使用单独的图像。例如： 一：悬停{背景：#f00； }

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