jquery - 将背景图像滑动到图像链接后面

Question

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

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

我能够使用简单的纯文本菜单、背景幻灯片图像和 jQuery 来完成此操作(通过教程):jQuery buttons ,但我想用 2 张图像来完成此操作。

我的解释正确吗？我该如何尝试做到这一点？

Answer 1

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

1) 在背景图像 Sprite 中包含透明图像。因此，您需要组合两个图像并将其用作单个背景图像。然后你只需相应地放置背景图像即可。如果您不熟悉 Sprite ，这里有一篇讨论它们的文章:CSS Sprite Button

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

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