使用带有翻转和透明精灵的 JQuery答案

【问题标题】：Using JQuery with a rollover and transparent sprite使用带有翻转和透明精灵的 JQuery
【发布时间】：2011-10-26 10:48:52
【问题描述】：

我正在使用 Remy Sharp 的 excellent tutorial 使用 sprite、CSS 和 JQuery 创建一个翻转菜单。 JQuery 仅用于通过淡入淡出效果缓解翻转，并且与不透明的图像精灵完美配合。但是，我在修改 JQuery 以使用我的透明 PNG 时遇到了很大的困难，因为原始的“关闭状态”图像仍然显示在下面。

我想我可以纠正这个问题的唯一方法是在顶部图像淡出时淡出底部图像。不幸的是，我在这方面所做的任何尝试都隐藏了一切。谁能指出我正确的方向？

请查看我的jsFiddle 示例。

【问题讨论】：

你应该添加一个快速的 jsFiddle。这将使其他人更容易看到您的问题并帮助您更快地解决问题。
谢谢@DadeLamkins，我已经用 jsFiddle 更新了。
我会在支持它的地方使用CSS transitions，然后为旧版的浏览器恢复为 JS。
谢谢@Josh。然而，我相信目前不可能使用 CSS 过渡在背景图像之间淡入淡出。
你能用精灵和动画背景位置吗？

标签： jquery html css

【解决方案1】：

你必须做一个不同的结构。例如：

Is this what you wanted?

我只是快速修改了您的代码，所以它有点难看。基本上，我删除了容器元素的背景（'a.home'），并在其下方添加了另一个带有关闭状态图像的跨度（'$off'）。容器内的 span 用于显示悬停图像（'a.home span.hover'）。

希望这会有所帮助。

【讨论】：

谢谢@Shomz，这正是我所追求的。