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

Question

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

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

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

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

Answer 1

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

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

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

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