jQuery背景图像在提交按钮输入上褪色答案

【问题标题】：jQuery background image fading on a submit button inputjQuery背景图像在提交按钮输入上褪色
【发布时间】：2011-05-21 05:17:09
【问题描述】：

我一直在使用this tutorial 的基本要点创建带有背景图像的链接，这些背景图像在悬停时会淡入不同的背景图像（使用精灵）。这基本上是通过在链接中放置一个空跨度来完成的，该跨度在悬停之前隐藏，然后淡入查看。

如何使用提交按钮输入来做同样的事情？我不能只放一个跨度，因为很明显你不能在输入标签内插入 HTML，因为它是自动关闭的。那么还有其他选择吗？

我在想的一件事是用相同宽度/高度的 div 包围输入，并为 div 提供悬停背景图像，并在悬停时将跨度淡化为 0.01 之类的不透明度，以便它仍然是可点击但要透明。有没有更好的选择或者这是要走的路？

【问题讨论】：

【解决方案1】：

我认为您真正想知道的（如果我可以这么说的话）是如何在表单中使用图像作为提交按钮。设置完成后，在 jquery 中使用 fade 方法应该非常简单。

这是另一个 SO 问题，展示了如何为您的按钮使用背景图片：

另请注意，Safari 不允许将背景图像用于按钮，因此您需要修改它（类似于您建议使用 div 的方法）。上面的问题也涵盖了这一点。

【讨论】：

实际上比这要复杂一些。我需要在悬停时淡出到完全不同的图像，而不仅仅是淡出原始图像。可以在dragoninteractive.com的导航上看到该概念的演示
如果要淡入另一个图像，可以使用fadeTo 效果。关键（您可能已经知道这一点）是禁用默认的表单提交操作并让表单通过 ajax 提交。否则，您的表单将在用户看到淡入淡出之前提交。

【解决方案2】：

我最终使用了this technique。

基本上，不是在元素内添加跨度，而是在元素周围添加一个 div 并在悬停时淡入按钮。

【讨论】：